CSS垂直水平居中方法总结

在布局的时候经常能用到居中，在此总结一下

html结构：

<div class="wrap">
    <div class="content"></div>
</div>

1.水平居中：margin:auto;

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightblue;
}
.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    /*margin:auto只能水平居中*/
        margin: auto;
}    

此方法简单只需一行代码，但是只能水平居中，至于为什么垂直居中不起作用呢：默认宽度继承父级宽度,而高度不能继承可以由内容撑开，居中计算时是相对父级计算因此垂直居中不起作用

效果如下：

2.垂直居中：table-cell

.wrap{
   width: 400px;
   height: 400px;
   background-color: lightblue;
   /* 将父元素的display设置为table-cell*/
   display: table-cell;                
   vertical-align: middle;
}
.content{
   width: 200px;
   height: 200px;
   background-color: lightcoral;
}

这里要强调一点就是display:table-cell是对父元素设置的，在表格单元中，vertical-align属性会设置单元格框中的单元格内容的对齐方式。这里设置为middle居中对齐，有兴趣的小伙伴也可以试试其他值如：top,bottom等。

效果如下：

3.一个水平居中，一个垂直居中放在一起是不是就可以垂直水平居中了

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightblue;
    display: table-cell;
    vertical-align: middle;
}
.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    margin: auto;
}

效果图：

bingo就是这么完美 

4.绝对定位（高度未知）

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightblue;
    /*父元素相对定位*/
    position: relative;
}
.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    /*子元素绝对定位*/
    position: absolute;
    /*子元素分别相对top,left偏移50%*/
    top:50%;
    left: 50%;
    /*子元素相对自身top,left分别移动-50%*/
    transform: translate(-50%,-50%);
}        

效果图：

上面两种方法优点在于可以在高度未知的情况下使用，下面这种方法就要知道子元素高度

5.绝对定位(已知子元素宽高的情况下) 调整负margin值

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightblue;
    /*父元素相对定位*/
    position: relative;
}
.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    /*子元素绝对定位*/
    position: absolute;
    /*子元素分别相对top,left偏移50%*/
    top:50%;
    left: 50%;
    /*子元素相对自身top,left分别移动负100像素*/
   margin-top:-100px;
   margin-left:-100px;
}        

效果图与上面一种方法一样就不在放了。

6.弹性盒模型：display:flex;

.wrap{
    width: 400px;
    height: 400px;
    background-color: lightblue;
    display:flex;
}
.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
   margin:auto;
}        

flex兼容性问题可参考下图：

7.单行文本居中:line-height

html结构：

<div class="content">一切都是最好的安排</div>

css样式：

.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    line-height: 200px;
}

效果图：

8.多行文本就不能用line-height了，还可以用上面table-cell方法来使多行文本居中

.content{
    width: 200px;
    height: 200px;
    background-color: lightcoral;
    display:table-cell;
    vertical-align:middle; 
}

可以直接在div(.content)中输入文本或者文本输入在一个标签里

更新与2016-12-30

9.text-align:center+inline-block文本居中

text-align属性用于控制文字的对其与显示，从其渲染与解析上来看，其主要是用来控制inline水平元素或inline-block元素的对齐与显示的，例如嵌套行内标签的文字、图片、input表单控件等；而对block水平的元素是没有作用的。

 *{
            margin:0;
            padding:0;
        }
        div{
            width:400px;
            height:400px;
            background-color: #00AA88;
        }
        ul{
            font-size: 0;
            /*因为li标签inline-block后li之间默认有3px间隙，font-size设为0去除间隙*/
            text-align: center;
        }
        li{
            font-size: 16px;
            display: inline-block;
            border:1px solid #000;
        }

效果如下：

稍加修改可以作为分页标签来使用。