关于居中

关于居中：

1、水平居中：  margin: 0 auto;
css3不定宽高水平垂直居中 ，只要三句话就可以实现不定宽高水平垂直居中，在父级元素上面加上上面3句话，就可以实现子元素水平垂直居中：
justify-content:center;//子元素水平居中 
align-items:center;//子元素垂直居中
display:-webkit-flex;

2、垂直居中： 
①对于具有vertical-align属性的容器元素，可以直接vertical-align: middle;  

②对于高度可伸缩的内容（未设置固定高度的），可以设置包含内容的那个容器元素的padding: 固定px值; 内容会自适应宽高，然后看起来就居中

③对于只有一行内容的，也就是单行垂直居中 ，只需要设置包含内容的那个容器元素的实际高度height和内容的line-height相等即可。line-height设置了紧跟一个overflow:hidden 是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了。 

④对于多行文本固定高度的垂直居中，将容器模拟成具有vertical-align属性的容器元素，然后使用vertical-align属性，例如
在CSS中还有一个display属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素，用来设置display:table-cell
但是IE7及以下版本 不能正确地理解display:table和display:table-cell，可以运用定位来居中top:50%    、或者嵌套table标签进去，因为td是可以使用vertical-align属性的。

固定高宽的定位来居中很简单，写法如下：
 position: absolute; 
 left: 50%;
 top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;