一崩溪、水平居中
<div class="parent">
? ? <div class="child"></div>
</div>
1. ?行內(nèi)元素水平居中
text-align: center可以實現(xiàn)在塊級元素內(nèi)部的行內(nèi)元素水平居中。此方法對inline斩松、inline-block伶唯、inline-table和inline-flex元素水平居中都有效。
.parent{
? ? text-align:center;
}
.child{
? ? display:inline-block;
}
2.塊級元素的水平居中
①將該塊級元素左右外邊距margin-left和margin-right設置為auto
.child{
? ? width:100px;//確保該塊級元素定寬
? ? margin:0 auto;
}
②使用table+margin
display:table在表現(xiàn)上類似block元素惧盹，但是寬度為內(nèi)容寬抵怎。
.child{
? ? display:table;
? ? margin:0 auto;
}
③使用absolute+transform
.child{
? ? position:absolute;
? ? left:50%;
? ? transform:translateX(-50%);
}
.parent{
? ? position:relative;
}
④使用flex+justify-content
.parent{
? ? display:flex;
? ? justify-content:center;
}
⑤使用flex+margin
.parent{
? ? display:flex;
}
.child{
? ? margin:0 auto;
}
3.多塊級元素水平居中
<div class="parent">
? ? <div class="child"></div>
? ? <div class="child"></div>
? ? <div class="child"></div>?
</div>
①利用flex布局
.parent{
? ? display:flex;
? ? justify-content:center;
}
②利用inline-block
.parent{
? ? text-align:center;
}
.child{
? ? display:inline-block;
}
4.浮動元素水平居中
①定寬的非浮動元素
通過子元素設置relative + 負margin
.parent{
? ? width:500px;
}
.child{
? ? position:relative;
? ? left:50%;
? ? margin-left:-250px;
}
②不定寬的浮動元素
.parent{
? ? float:left;
? ? position:relative;
? ? left:50%;
}
.child{
? ? float:left;
? ? position:relative;
? ? right:50%;
}
③利用flex布局
.parent{
? ? display:flex;
? ? justify-content:center;
}
.chlid{
? ? float:left;
}
5.絕對定位元素水平居中
.parent{
? ? position:relative;
}
.child{
? ? position:absolute;/*絕對定位*/
? ? width:200px;
? ? height:100px;
? ? margin:0auto;/*水平居中*/
? ? left:0;/*此處不能省略奋救，且為0*/
? ? right:0;/*此處不能省略，且為0*/
}
二反惕、垂直居中
1.單行內(nèi)聯(lián)元素垂直居中
.parent{
? ? height:120px;
? ? line-height:120px;
}
2.多行內(nèi)聯(lián)元素垂直居中
①利用flex布局（flex）
利用flex布局實現(xiàn)垂直居中，其中flex-direction: column定義主軸方向為縱向演侯。這種方式在較老的瀏覽器存在兼容性問題
.parent{
? ? height:140px;
? ? display:flex;
? ? flex-direction:column;
? ? justify-content:center;
}
②利用表布局
利用表布局的vertical-align: middle可以實現(xiàn)子元素的垂直居中
.parent{
? ? display:table;
? ? height:140px;
}
.child{
? ? display:table-cell;
? ? vertical-align:middle;
}
3.塊級元素垂直居中
①使用absolute+負margin(已知高度)
.parent{
? ? position:relative;
}
.child{
? ? position:absolute;??
? ? top:50%;
? ? height:100px;
? ? margin-top:-50px;
}
②使用absolute+transform(未知高度)
.parent{
? ? position:relative;
}
.child{
? ? position:absolute;
? ? top:50%;
? ? transform:translateY(-50%);
}
③使用flex+align-items
.parent{
? ? display:flex;
? ? align-items:center;
}
④使用table-cell+vertical-align
通過將父元素轉化為一個表格單元格顯示（類似<td>和<th>）姿染，再通過設置vertical-align屬性，使表格單元格內(nèi)容垂直居中
.parent{
? ? display:table-cell;
? ? vertical-align:middle;
}
三秒际、水平垂直居中
1.絕對定位與負邊距實現(xiàn)（已知高度寬度悬赏， 假設寬高100px ）
.parent{
? ? position:relative;
}
.child{
? ? position:absolute;
? ? top:50%;
? ? left:50%;
? ? margin:-50px 0 0 -50px;
}
2.絕對定位與margin:auto（已知高度寬度， 假設寬高100px ）
.parent{
? ? position:relative;
? ? height:100px;//必須有個高度
}
.child{
? ? position:absolute;
? ? top:0;
? ? left:0;
? ? right:0;
? ? bottom:0;
? ? margin:auto;//注意此處的寫法
}
3.絕對定位+CSS3(未知元素的高寬娄徊，常用)
.parent{
? ? position:relative;
}
.child {
? ? position:absolute;
? ? top:50%;
? ? left:50%;
? ? transform:translate(-50%,-50%);
}
4.flex布局
.parent{
? ? height:100vh;//必須有高度
? ? display:flex;
? ? justify-content:center;//水平居中
? ? align-items:center;//垂直居中
}
5.flex/grid與margin:auto(最簡單寫法)
.parent {
? ? height:?100vh;//必須有高度
? ? display:?grid;
}
.child {
? ? margin:?auto;
}
