块级元素的水平居中,可以直接通过margin:0 auto;
设置,非常简单。
块级元素的垂直居中,在已知元素与父级元素的高度时,可以通过设置父级元素的padding-top
来实现。例如:
<style> #wrapper{ width:500px; height:300px; background:gray; padding-top:50px; } #inner{ width:300px; height:200px; margin:0 auto; background:red; } </style> <div id="wrapper"> <div id="inner"></div> </div>
要注意元素的盒子模型,当然是box-sizing:border-box;
模型。