使用CSS3实现垂直左右居中显示
1 | .container { |
对应的html为
1 | <div class="container"></div> |
最主要是随着浏览器窗口变化,左右上下边距也会自动调整,因而再也不需要通过js来监听windonw的resize事件了。
当然还有一种更加简单粗暴的方法,css代码如下
1 | .container { |
这种方法利用的原理是
‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block
详细请参考w3c标准