关于css3居中方式

介绍

CSS的居中样式有许多种，其中分为水平居中、垂直居中、水平垂直居中三中居中样式，接下来我就给大家介绍一下吧！

一、水平居中

行内元素
把行内元素放在一个块级元素中，然后赋予父元素居中属性。

.a {
text-align:center;
}

块状元素
为该元素设置外边距

.a {
margin: 100px auto;
}

多个块状元素
把块状元素属性（inline-block）的父层元素赋予居中属性。

.a {
text-align:center;
}

二、垂直居中

对于行内元素，设置height和line-height属性

.test {
height: 100px;
line-height:100px; 
}

对于已知高度的块状元素，给要居中的元素设置如下属性

.test {
top: 50%;
margin-top: -50px;  /* margin-top值为自身高度的一半 */
position: absolute;
padding:0;
}

三、水平垂直居中

对于已知高度和宽度的元素。给要居中的元素设置如下属性

.test {
position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0;
}

或

.test{
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;  /* 设置margin-left / margin-top 为自身高度的一半 */
margin-left: -75px;

}