【原】前端經(jīng)典案例：CSS水平、垂直居中布局

星河帆帆 2020-04-22

展開全文

1、水平居中

1.1、行內(nèi)元素水平居中

這里行內(nèi)元素是指文本text、圖像img、按鈕超鏈接等，只需給父元素設(shè)置text-align:center即可實(shí)現(xiàn)。

.box {
    text-align: center;
    background-color: #f6e5dd;
}
<div class="box">
    水平居中
</div>

1.2、塊級(jí)元素水平居中

1.2.1、固定寬度塊級(jí)元素水平居中

只需給需要居中的塊級(jí)元素加margin:0 auto即可，但這里需要注意的是，這里塊狀元素的寬度width值一定要有

.box {
    width: 200px;
    margin: 0 auto;  /*左右margin值auto自動(dòng)，不能為0*/
    
    background-color: #f6e5dd;
}
<div class="box">水平居中</div>

1.2.2、不固定寬度塊級(jí)元素水平居中

方法1：設(shè)置table布局

通過給要居中顯示的元素，設(shè)置display:table，然后設(shè)置margin:0 auto來實(shí)現(xiàn)

.box {
    display: table;
    margin: 0 auto;
    
    background-color: #f6e5dd;
}
<div class="box">水平居中</div>

方法2：設(shè)置子元素inline-block（多個(gè)塊狀子元素均可居中）

子元素設(shè)置inline-block，同時(shí)父元素設(shè)置text-align:center

.box {
    text-align: center;
    
    background-color: #f6e5dd;
}
.inlineblock-div {
    display: inline-block;  /*不能設(shè)置為block或其他*/
    
    text-align: center;
    background-color: #d5eeeb;
}
<div class="box">
    <div class="inlineblock-div">子元素1</div>
    <div class="inlineblock-div">子元素2</div>
</div>

方法3：設(shè)置flex布局

只需把要處理的塊狀元素的父元素設(shè)置display:flex,justify-content:center;

.box {
    display: flex;
    justify-content: center;
    
    background-color: #f6e5dd;
}
.flex-div {
    background-color: #d5eeeb;
    border: 2px solid red;
}
<div class="box">
    <div class="flex-div">子元素1</div>
    <div class="flex-div">子元素2</div>
</div>

2、垂直居中

2.1、單行文本垂直居中

設(shè)置line-height=height；

.box {
    height: 100px;
    line-height: 100px;
    
    background-color: #f6e5dd;
}
<div class="box">垂直居中的文本</div>

2.2、多行文本垂直居中

通過設(shè)置父元素table，子元素table-cell和vertical-align

vertical-align:middle的意思是把元素放在父元素的中部

.box {
    display: table;
    width: 300px;
    height: 200px;
    
    background-color: #f6e5dd;
}
.table-div {
    display: table-cell;
    vertical-align: middle;
    
    border: 5px solid blue;
}
<div class="box">
    <div class="table-div"> 
        垂直居中的文本<br/>
        另一行文本
    </div>
</div>

2.3、塊級(jí)元素垂直居中

方法1：flex布局

在需要垂直居中的父元素上，設(shè)置display:flex和align-items：center

要求：父元素必須顯示設(shè)置height值

.box {
    height: 100px;
    width: 300px;
    display: flex;
    align-items: center;
    
    background-color: #f6e5dd;
}
.item {
    background-color: #d5eeeb;
}
<div class="box">
    <div class="item">垂直居中的塊級(jí)元素</div>
</div>

方法2：利用position和top和負(fù)margin（需知寬高）

.parent {
    position: relative;
    height: 200px;
    width: 200px;
    
    background-color: #f6e5dd;
}


.child {
    position: absolute;
    height: 100px;
    width: 150px;
    top: 50%;
    margin-top: -50px;  /*高度的一半*/
    line-height: 100px;
    background-color: #d5eeeb;
}
<div class="parent">
    <div class="child">已知高度垂直居中</div>
</div>

方法3：利用position和top和transform

transform中translate偏移的百分比就是相對(duì)于元素自身的尺寸而言的。

.parent {
    position: relative;


    height: 200px;
    width: 200px;
    background-color: #f6e5dd;
}
.child {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);


    background-color: #d5eeeb;
}
<div class="parent">
    <div class="child">已知高度垂直居中</div>
</div>

3、水平垂直居中

3.1、絕對(duì)定位 + 負(fù) Margin

原理：首先利用 absolute 定位把容器塊左頂角對(duì)準(zhǔn)瀏覽器中心，然后再使用負(fù) margin 把容器塊向左移動(dòng)自身寬度的一半，向上移動(dòng)自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。
優(yōu)點(diǎn)：兼容性好
缺點(diǎn)：需要知道寬高，不夠靈活

.container {
    /* ---容器盒子水平、垂直居中對(duì)齊--- */
    width: 200px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;    /* 寬度的一半 */
    margin-top: -50px;  /* 高度的一半 */


    /* ---內(nèi)容居中對(duì)齊--- */
    line-height:100px;	/* 同容器盒子的高度一致 */
    text-align: center;
    background: #f6e5dd;
}
<div class="container">水平、垂直居中布局</div>

3.2、絕對(duì)定位+Transform

原理：首先利用 absolute 定位把容器塊左頂角對(duì)準(zhǔn)瀏覽器中心，然后再使用 CSS3 transform 的 translate(x,y) 把容器塊向左(x)移動(dòng)自身寬度的一半，向上(y)移動(dòng)自身高度的一半，即可以把容器塊的中心移到瀏覽器中心。
優(yōu)點(diǎn)：不依賴盒子的寬高，比較靈活
缺點(diǎn)，兼容不好，在移動(dòng)設(shè)備上建議使用

.container {
    /* ---容器盒子水平、垂直居中對(duì)齊--- */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);


    width: 200px;
    height: 100px;


    /* ---內(nèi)容居中對(duì)齊--- */
    line-height: 100px;
    /* 同容器盒子的高度一致 */
    text-align: center;
    background: #e6f4f5;
}
<div class="container">水平、垂直居中布局</div

3.3、絕對(duì)定位 + 自動(dòng) Margin

原理：瀏覽器自動(dòng)計(jì)算絕對(duì)定位的容器塊上下左右外邊距。
優(yōu)點(diǎn)：靈活切兼容性好（IE8+）
缺點(diǎn)：適用于本身有尺寸的元素（比如圖片），對(duì)于段落等必須顯式設(shè)置其寬高

.container {
    /* ---容器盒子水平、垂直居中對(duì)齊--- */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;


    width: 200px;
    height: 100px;


    /* ---內(nèi)容居中對(duì)齊--- */
    line-height: 100px;
    /* 同容器盒子的高度一致 */
    text-align: center;
    background: #d5eeeb;
}
<div class="container">水平、垂直居中布局</div>

3.4、Flex布局

優(yōu)點(diǎn)：不需要知道寬高
缺點(diǎn)：相對(duì)于父容器定位，兼容性不好

.container {
    /* ---容器盒子水平、垂直居中對(duì)齊--- */
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;


    width: 200px;
    height: 100px;


    background: #d5eeeb;
}
.child {
    background: #f6e5dd;
    height: 50px;
    width: 100px;
}
<div class="container">
    <div class="child">水平、垂直居中布局</div>
</div>