CSS实现居中的几种方法

水平居中

1.对于定宽块状元素，直接设置左右margin

{
    margin-left: auto;
    margin-right: auto;
}

2.对于非定宽的块状元素由三种方法：

a.利用table元素的长度自适应性，加入table标签

先在要设置的元素外加一个标签（包括<tbody>、<tr>、<td>）

接着给table设置左右margin

{
    margin-left: auto;
    margin-right: auto;
}

b.改变块级元素的display属性,但一旦改变属性后，margin和padding等属性都不能用了，所以尽量不用这种。

{
    display: inline;
    text-align: center;
}

c.通过分别给父元素和子元素设置来实现子元素居中

father {
    float: left;
    position: relative;
    left: 50%;
}

son {
    position: relative;
    left: -50%;
}

3.如果被设置元素为文本或图片等行内元素，通过设置父元素来实现

{
    text-align: center;
}

垂直居中

1.父元素高度确定的单行文本,通过设置父元素的height和line-height属性来实现，但文字内容过长会有内容脱离块

father {
    height: 100px;
    line-height: 100px;
}

2.父元素高度确定的多行文本，通过插入table然后设置vertical-align属性，该样式会对inline-block类型的子元素起作用；此外，在chrome、firefox和IE8以后的浏览器可以设置块级元素display属性后直接使用vertical-align

{
    display: table-cell;
    vertical-align: center;
}