1.行內(nèi)元素居中
text-align:center
//讓文字,行內(nèi)元素,input,img,在盒子內(nèi)水平居中 前提:盒子的寬度>內(nèi)容的寬度
2.讓塊級(jí)元素在父級(jí)元素中水平居中
margin:0 auto
//前提:這個(gè)盒子的寬度<父級(jí)元素的寬度
3.定位居中
div{
width:100px;
height:100px;
background:red
margin:auto;
position:absolute //或是fixed
top:0;
left:0;
bottom:0;
right:0;
}
div {
width: 100px;
height: 100px;
position: absolute; //或是fixed
left:50%;
top:50%;
margin-left: -50px;
margin-top: -50px;
background: red;
}
div {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background: red;
}
//基于視口單位
div {
margin: 50vh auto 0;
transform: translateY(-50%);
text-align: center;
}
4.基線對(duì)齊
vartical-align:middle
//例如:當(dāng)行內(nèi)元素(span)要和行內(nèi)塊級(jí)元素(img)對(duì)齊是可以對(duì)(img)設(shè)置
5.單行垂直居中
line-height
//必須和height的值相同,用于單行文字,行內(nèi)元素的垂直居中
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。