1.水平居中

行内元素 tex-align:center

给定宽度的块级元素 margin:0 auto

未知宽度的块级元素

table标签（或者直接将块级元素设置样式为 display:table ）配合给定宽度的块级元素的 margin:0 auto 实现水平居中

设置样式为 display:inline-block ，利用行内元素的*text-align:center*实现水平居中

flex布局

.container{

    //container是我们要居中的item的容器

display:flex;

display:-webkit-flex;

jusitify-content:center;

//要垂直居中加上下面

align-center:center;

}

1

2

3

4

5

6

7

8

flex布局有很多妙用，这里就不一一列举了，大家感兴趣可以看看下面这篇教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html‘

另外值得注意的是行内元素也可以设置为flex，dispaly:inline-flex

垂直居中

对于行内元素和display:table-cell的元素（如td），可以直接使用vertical-align:center实现。

设置元素样式display:table-cell，配合vertical-align:center实现。

.container{

display:table-cell;

vertical-align:center;

//需要水平也居中加上

text-align:center;

}

1

2

3

4

5

6

关于vertical-align的具体用法，推荐（英语要好）：

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

flex实现

.container{

display:flex;

display:-webkit-flex;

align-items:center;

}

1

2

3

4

5

图片和文字水平对齐

设置图片vertical-align:middle

img{

vertical-align:middle;

}