CSS之居中方案（内联元素、块级元素）

内联元素居中方案

水平居中设置：

1、行内元素

设置 text-align:center;

2、Flex布局

设置 display:flex;

         justify-content:center;（灵活运用，支持Chroime Firefox IE9+）

垂直元素居中：

1、父元素高度确定的单行文本（内联元素）：

设置 height=line-height;

.div{
    height:30px;
    line-height:30px;
}

2、父元素高度确定的多行文本（内联元素）：

（1）插入table（插入方法和水平居中一样），然后设置 vertical-align:middle;

（2）先设置 display:table-cell，再设置 vertical-align:middle;

块级元素居中方案：

水平居中设置：

1、定宽块级元素

设置左右 margin 值为 auto

2、不定宽块级元素

（1）在元素外加入table标签（完整的，包括table tbody tr td），该元素写在td内，然后设置margin值为auto

（2）把块级元素的display设为Inline-block即改为行内元素，通过设置父元素的Text-Align:Center来实现居中,但这样做后块级元素不能设置Width属性

（3）给父元素增加Float:Left，同时设置Position:Relative和Left:50%。而子元素设置Position:Relative和Left:-50%来实现水平居中，可以保留块级元素的Display:Block属性

垂直居中方案：

（1）使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

（2）利用position:fixed（absolute）属性，margin:auto;

（3）利用display:table-cell属性使内容垂直居中;

（4）使用css3的新属性transform:translate(x,y)属性;

（5）使用:before元素;