居中方式

1、已经知道块元素的宽高，绝对定位

.element {

    width: 600px; height: 400px;

    position: absolute; left: 50%; top: 50%;

    margin-top: -200px;    /* 高度的一半 */

    margin-left: -300px;    /* 宽度的一半 */

}

2、Css居中

CSS3中利用transform代替margin. transform中translate偏移的百分比值是相对于自身大小：

.element {

    width: 600px; height: 400px;

    position: absolute; left: 50%; top: 50%;

    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */

}

 

3、通过Margin居中

.element {

    width: 600px; height: 400px;

    position: absolute; left: 0; top: 0; right: 0; bottom: 0;

    margin: auto;    /* 有了这个就自动居中了 */

} 

代码两个关键点：

1.上下左右均0位置定位；

2.margin: auto

4、Padding居中

padding的像素可累加到宽高中，因此也可用于居中。

对于块元素来说，将父元素和子元素设置同样的宽高，再为父元素的上下左右设置同样的padding值，也可使子元素实现居中。

对于行内元素来说，通过display: inline-block;转化为块元素后，也可用padding实现其内的文字居中。

5、行内元素居中方式

行内元素例如<a></a>、<span></span>、<p></p>等，可使用text-align:center;实现水平居中

再通过设置属性display: inline-block;将行内元素转换为块状元素后，便可设置高height，再将line-height 设置同样的行高，就可以实现垂直居中。