水平居中and 垂直居中

水平居中-行内设置

比如照片，文本之类的行内元素，可以在他们的父元素里设置 text-align:center来实现。

水平居中-定宽的块状元素

  display:block;

width:100px;

margin: 0 auto;

水平居中-不定宽的块状元素

方法一：加入 table标签，因为 table 标签是长度自适应的，相当于有了宽度，所以直接设置 margin: 0 auto ; 

方法二：将子块状元素的display改为inline ，其父元素加上text-align:center；

**方法三： 方法三：通过给父元素设置  float ，然后给父元素设置   position:relative   和 left:50%，子元素设置 position:relative 和 left:  -50%   来实现水平居中。

垂直居中-

父元素高度确定的单行文本，height=line-height,

为元素加上<table><tbody><tr><td>，<td>标签默认情况下就有vertical-align：middle ，我们不用再添加什么了

多行文本的display：table-cell；激活vertical-align属性；

将display设置为absolute 或者float:left；就可以设置width和height ，再设置height = line-height;