块级元素居中
- 块级设置宽度,margin:0 auto;
- 计算margin值,计算margin-top,left,right,bottom
- 外层宽度撑满屏幕,设置text-align:center;内层设置display:inline-block;
ul {position: absolute;left: 0;right: 0;bottom:-30px;text-align: center;} ul li { border-radius:50% ;width: 20px;height: 20px;background: white;display: inline-block; box-shadow: 0 0 4px rgba(25,25,25,0.8);cursor:pointer; }
浮动后居中
-
用position: absolute;text-align:center;
-
多个li浮动后内层元素叠到一起:外层li:position:relative;内层设置position:absolute; top:0;left:0;right:0;bottom:0;margin:0 auto;
#content >ul li{position: relative;}
#content >ul li > section{width: 1100px;height: 520px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin:0 auto;}
- 如果有width,把left和right设置为相同的值,只要相同,margin:0 auto;只要左右距离相等,剩余距离浏览器会计算。浏览器计算auto会优先计算平分,如果没有width,内容多宽就多宽,元素会被拉伸到设置的值(如left:10px;right:20px;)