元素居中分為水平居中和垂直居中兩種。
一、水平居中
text-align
.container {
text-align: center;
}
在元素的父元素上設置text-align的值為center就可以使文字/圖片變為水平居中。設置為left/right的時候是左對齊/右對齊。
margin
.container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
給元素的左和右的margin設置為auto并且元素在設置寬度之后就可以實現水平居中。
區別：text-align:center設置為文本或img標簽等一些內聯對象（或與之類似的元素）的居中。margin:0 auto是設置塊元素（或與之類似的元素）的居中。
二、垂直居中
line-height
設置元素的line-height值與height值相等即可實現元素垂直居中。適用于單行元素。
table-cell
.box{
width: 300px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
設置元素的display值為table-cell，適用于所有元素。
絕對定位
用absolute來設置元素的位置，適用于所有元素。
vertical-align
設置vertical-align的值為middle，可實現元素垂直居中，適用于所有元素。
flex
.space {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
}
利用display: flex來進行垂直居中，設置align-items為center，可實現元素垂直居中。
