CSS居中显示

使用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标准