水平居中
行內(nèi)元素：在其父元素上設(shè)置text-align：center
. container {
text-align: center;
}
注：此種方式.container要設(shè)置寬度才有效果
塊級元素：給其設(shè)置寬度山孔，左右margin： auto
.container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
水平居中還可以使用絕對定位和flex布局的方式游桩，具體見下面垂直居中的絕對定位和flex布局方式
垂直居中
行內(nèi)元素：
1.將高度和line-height設(shè)置相同
box {
height:30px;
line-height:30px;
}
2.設(shè)置上下padding相同
.box {
padding: 10px 0;
}
3.vertical-align實(shí)現(xiàn)定位,此種方法的原理是在容器上設(shè)置一條垂直的充滿整個(gè)高度的缠劝，沒有寬度的inline-block的線條种蝶，給這個(gè)線條設(shè)置個(gè)vertical-align扩借，在給需要垂直居中的行內(nèi)元素設(shè)置vertical-align以便和前面的線條居中對齊
.box::before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img{
vertical-align: middle;
background: blue;
}
塊級元素：
1.絕對定位實(shí)現(xiàn)居中,給需要相對的父級以上的容器設(shè)置position：relative
.box {
width: 400px;
height: 300px;
position: absoulue;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2.使用display: table-cell讓標(biāo)簽元素以表格單元格的形式呈現(xiàn)襟铭，類似于td標(biāo)簽。然后使用vertical-align： middle實(shí)現(xiàn)居中
注:這方式如果不給容器設(shè)置寬度翁都，容器寬度會收縮至內(nèi)容的大小
.box {
width: 400px;
height: 300px;
display: table-cell;
vertical-align: middle;
}
3.display: flex實(shí)現(xiàn)居中
①通用方法：align-items: center;設(shè)置垂直居中碍论；justify-content: center;實(shí)現(xiàn)水平居中。
<div class="space">
<div class="earth"></div>
</div>
.space {
width: 100vw;
height: 100vh; /* 設(shè)置寬高以顯示居中效果 */
display: flex; /* 彈性布局 */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.earth::after {
content: '??';
font-size: 85px;
}
②對于flex布局中的塊級元素可以單獨(dú)設(shè)置margin:auto;垂直水平居中（margin:auto 0;垂直居中柄慰。margin:0 auto;水平居中）
<div class="space">
<div class="earth"></div>
</div>
.space {
width: 100vw;
height: 100vh; /* 設(shè)置寬高以顯示居中效果 */
display: flex; /* 彈性布局 */
}
.earth {
width:50px;
height:50px;
border-radius:50px;
background:#00ffff;
margin:auto;
}
