使用CSS3实现垂直左右居中显示

1
2
3
4
5
6
7
8
.container {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
background: #FDFDFD;
}

对应的html为

1
<div class="container"></div>

最主要是随着浏览器窗口变化,左右上下边距也会自动调整,因而再也不需要通过js来监听windonw的resize事件了。

当然还有一种更加简单粗暴的方法,css代码如下

1
2
3
4
5
6
7
8
9
10
11
.container {
position: fixed;
width: 200px;
height: 200px;
background: orange;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}

这种方法利用的原理是

‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block

详细请参考w3c标准

Contents