一、行內(nèi)元素水平居中
text-align: center;
二、行內(nèi)元素垂直居中
height: 40px;line-height: 40px; 讓這兩個值相等
三、塊級元素水平居中
width: 300px; margin: 0 auto; 可以不設(shè)置高度
三、塊級元素垂直居中
1.固定寬高塊級元素垂直居中
div{ width: 200px; height: 100px; line-height: 100px; border: 1px solid #000; text-align: center; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -50px; }
2.寬高是百分比的塊級元素垂直居中
div{ width: 10%; height: 30%; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto;
}
3.寬高不固定的塊級元素垂直居中
div{ transform: translate(-50%,-50%);/*此時的百分數(shù)是以自身的寬高為參考*/ /*width: 1500px; height: 300px;*/ /*width: 300px;*/ width: 30%; height: auto;
【 微信掃一掃 】