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