css對齊方案總結

垂直居中

通用佈局方式(內斂元素和塊狀元素都適用)css

利用flex:
核心代碼:web

.container{
 display:flex;
 flex-direction:column;
 justify:center
}

利用transformX(-50%):
核心代碼:瀏覽器

.container{
 width: 300px;
 height: 300px;
 background: red;
 position:relative;
 }
.child{
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 -webkit-transform: translateY(-50%);
 }

內斂元素的垂直居中佈局

單行內斂元素:設置內斂元素的高度和行高相等
核心代碼:post

.container {
 height: 120px;
 line-height: 120px;
}

塊狀元素flex

固定元素高度的塊狀元素
核心代碼ui

.container{
 position: relative;
}
.child{
 position: absolute;
 top: 50%;
 height: 100px;
 margin-top: -50px; 
}

未知高度的塊狀元素
當垂直居中的元素的高度和寬度未知時，咱們能夠藉助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中。可是部分瀏覽器存在兼容性的問題。
核心代碼:spa
1
2
3
4
5
6
7
8
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

水平居中

通用佈局方式code

flex佈局
核心代碼：orm

.container{
display: flex; 
 justify-content: center;
}

absoulte+transform
核心代碼:

.container{
position:relative;
}
.child{
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
}

內斂元素水平居中

text-align:center
核心代碼:
1
2
3
.container{
text-align:center
}

塊狀元素水平居中

使用 margin:0 auto 必須註明子元素和父元素的寬度
核心代碼:
1
2
3
.container{
margin:0 auto
}
多塊狀元素：
利用內斂元素佈局方式container屬性爲text-align:center;
核心代碼:
1
2
3
4
5
6
.container{
text-align: center;
}
.child{
display: inline-block;
}

水平垂直居中

固定寬高元素水平垂直居中

經過margin平移元素總體寬度的一半，使元素水平垂直居中。
核心代碼:

.container {
 position: relative;
}
.child {
 width: 300px;
 height: 100px;
 padding: 20px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -70px 0 0 -170px;
}

未知寬高元素水平垂直居中

利用2D變換，在水平和垂直兩個方向都向反向平移寬高的一半，從而使元素水平垂直居中。
核心代碼：
1
2
3
4
5
6
7
8
9
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
利用flex佈局
利用flex佈局，其中justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
核心代碼：
1
2
3
4
5
.container {
display: flex;
justify-content: center;
align-items: center;
}

相對於 body 的水平垂直居中

列表佈局(兼容性好)
核心代碼:

.outer {
 display: table;
 position: absolute;
 height: 100%;
 width: 100%;
}

.middle {
 display: table-cell;
 vertical-align: middle;
}

.inner {
 margin-left: auto;
 margin-right: auto; 
 width: 400px;
}

position 佈局
核心代碼

.container{
 position: absolute;
 margin: auto;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 }