水平居中和垂直居中

http://blog.sina.com.cn/s/blog_be2200300102wskd.html

1、水平居中：

1） 父元素的text-align属性设置为center即可：

        但这只是将区域内的内容居中了

2）  那该如何让这个父元素区域div本身也居中呢？

        i)首先要给这个div固定的宽度，百分比和像素都可以，关键是要给width设置值（不然块级怎么居中），

        ii)然后让该元素的左右边距皆为自适应，即：

2、垂直居中：

方法一：

这要用到行高属性line-height

首先需要明确这个区域的高度，然后让line-height和它相等，

因为行高撑开的区域内部会自动垂直居中，高度和外面的高度一样后就重叠看不出来了:

但这个方法有个明显的问题，父元素区域高度不确定，需要一些自适应处理怎么办？

方法二：

这次我们用到的属性是vertical-align，这个属性字面意思就是垂直对齐

它必须配合display: table-cell;来使用，

而table-cell又需要让它的父元素的display设置为table才可以

注意居中的div设置浮动会导致居中失效，如果没有生效看看是不是设了float。

http://www.zymseo.com/276.html

设置图片元素上下垂直居中的7种css样式

position加margin

position加 transform

flex;align-items: center;justify-content: center

display:flex;margin:auto

纯position