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

星河帆帆 2020-04-22

展開全文

1、水平居中

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

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

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

1.2、塊級元素水平居中

1.2.1、固定寬度塊級元素水平居中

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

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

1.2.2、不固定寬度塊級元素水平居中

方法1：設置table布局

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

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

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

子元素設置inline-block，同時父元素設置text-align:center

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

方法3：設置flex布局

只需把要處理的塊狀元素的父元素設置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、單行文本垂直居中

設置line-height=height；

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

2.2、多行文本垂直居中

通過設置父元素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、塊級元素垂直居中

方法1：flex布局

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

要求：父元素必須顯示設置height值

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

方法2：利用position和top和負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偏移的百分比就是相對于元素自身的尺寸而言的。

.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、絕對定位 + 負 Margin

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

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


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

3.2、絕對定位+Transform

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

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


    width: 200px;
    height: 100px;


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

3.3、絕對定位 + 自動 Margin

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

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


    width: 200px;
    height: 100px;


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

3.4、Flex布局

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

.container {
    /* ---容器盒子水平、垂直居中對齊--- */
    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>