垂直居中
1. 使用 padding
CSS 中有很多方式可以實現(xiàn)垂直居中對齊悼院。 一個簡單的方式就是頭部頂部使用 padding:
. parent {
padding: 70px 0;
border: 3px solid green;
}
2. 使用 flexbox
使用 flexbox 布局是實現(xiàn)垂直居中最常用的方法之一四啰。在父容器上設(shè)置 display: flex 和 align-items: center，可以將子元素在垂直方向上居中溜畅。
.parent {
display: flex;
align-items: center; /* 在垂直方向上居中 */
}
或者
.parent {
display: flex;
}
. child {
align-self: center;
}
或者
.parent {
display: flex;
}
. child {
margin: auto 0;
}
顯示效果是在同一行, 即使子元素是塊級(block)元素,
3. 使用 table-cell
使用 table-cell 布局也是一種常見的垂直居中方法。在父容器上設(shè)置 display: table-cell、vertical-align: middle 和一個固定的高度铝耻，可以使子元素在垂直方向上居中。
.parent {
display: table-cell;
vertical-align: middle; /* 在垂直方向上居中 */
height: 200px; /* 固定高度 */
}
4. 使用 line-height
使用 line-height 屬性也可以實現(xiàn)垂直居中。將父元素的line-height 值設(shè)置為和父元素高度相等的值瓢捉，然后將子元素的 display 屬性設(shè)置為 inline-block频丘，就可以使子元素在垂直方向上居中。對于單行文字/行內(nèi)元素/行內(nèi)塊級元素都是適用的
.parent {
height: 200px; /* 父元素高度 */
line-height: 200px; /* 父元素高度 */
}
.child {
display: inline-block;
vertical-align: middle; /* 在垂直方向上居中 */
}
5. transform
使用 transform 也可以實現(xiàn)垂直居中泡态。將子元素的 position 屬性設(shè)置為 absolute搂漠，然后將top 和 left 屬性設(shè)置為 50%，最后使用 translate 函數(shù)將子元素向上和左移動自身高度和寬度的一半某弦，就可以實現(xiàn)垂直居中桐汤。具體代碼如下：
.parent {
position: relative; /* 父元素設(shè)置為相對定位 */
}
.child {
position: absolute; /* 子元素設(shè)置為絕對定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 將子元素向上和左移動自身高度和寬度的一半 */
}
在使用
transform實現(xiàn)垂直居中時，需要將父元素的position屬性設(shè)置為relative或absolute靶壮，否則子元素?zé)o法正確定位怔毛。
水平居中
1. text-align
使用text-align 屬性可以將文本或行內(nèi)元素水平居中芝发。將父元素的 text-align 屬性設(shè)置為center贿肩，就可以實現(xiàn)其內(nèi)部文本或行內(nèi)元素水平居中滚澜。
.parent {
text-align: center; /* 水平居中 */
}
2. margin
使用 margin 屬性可以將塊級元素水平居中跛溉。將元素的左右 margin 值設(shè)置為auto决采，就可以將元素水平居中赐劣。
.element {
margin: 0 auto; /* 水平居中 */
}
3. flexbox
使用flexbox 布局也可以實現(xiàn)元素水平居中定页。將父元素的 display 屬性設(shè)置為flex迅耘，再將 justify-content屬性設(shè)置為 center奸晴，就可以將子元素水平居中
.parent {
display: flex;
justify-content: center; /* 水平居中 */
}
4. grid
使用grid 布局也可以實現(xiàn)元素水平居中冤馏。將父元素的display 屬性設(shè)置為grid，再將 justify-content 屬性設(shè)置為 center蚁滋，就可以將子元素水平居中
.parent {
display: grid;
justify-content: center; /* 水平居中 */
}
中心位置
1. 使用padding和text-align
如果要水平和垂直都居中宿接，可以使用 padding 和 text-align: center:
. parent {
padding: 70px 0; /* 垂直居中 */
border: 3px solid green;
text-align: center; /* 水平居中 */
}
2. flexbox
將父元素的 display 屬性設(shè)置為flex，再將 justify-content 和 align-items 屬性都設(shè)置為 center辕录，即可將子元素水平和垂直居中睦霎。
.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 在垂直方向上居中 */
}
或者:
.parent {
display: flex;
place-items: center;
}
place-items是同時設(shè)置align-items和justify-items的快捷方式,
通過設(shè)置center, 其實是設(shè)置align-items:center; justify-items:center
3. 使用絕對定位和 transform 屬性
將元素的 position 屬性設(shè)置為 absolute，再將 top 和left 屬性設(shè)置為 50%走诞，再使用transform 屬性的 translate() 方法將元素向上和向左移動自身寬度和高度的一半即可實現(xiàn)垂直和水平居中副女。
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
4. 使用 text-align 和 line-height
將父元素的 text-align 屬性設(shè)置為 center，然后將父元素的 line-height 屬性設(shè)置為和其高度相同的值蚣旱，即可將內(nèi)部文本或行內(nèi)元素水平和垂直居中
.parent {
text-align: center;
line-height: 100px; /* 與元素高度相同的值 */
}
5. transform 和 flexbox
將父元素的 display 屬性設(shè)置為 flex碑幅，再將 justify-content 和 align-items 屬性都設(shè)置為 center，然后使用transform 屬性的translate()方法將子元素向上和向左移動自身寬度和高度的一半即可實現(xiàn)垂直和水平居中
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
transform: translate(-50%, -50%);
}
5. table 和 table-cell
將父元素的display 屬性設(shè)置為 table塞绿，再將子元素的 display 屬性設(shè)置為table-cell沟涨，然后將子元素的 vertical-align 屬性和 text-align 屬性都設(shè)置為 middle，即可將子元素水平和垂直居中异吻。
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
6. grid
將父元素的 display 屬性設(shè)置為 grid裹赴，再將 justify-items 和align-items屬性都設(shè)置為 center喜庞，即可將子元素水平和垂直居中。
.parent {
display: grid;
justify-items: center;
align-items: center;
}
更多布局可以查看: 常見布局實現(xiàn)
