各种元素水平垂直居中

在我们进行网站布局的时候，总是遇到让已知宽高元素和为止宽高元素水平垂直居中，下面就这问题我总结的几种方法。

1.让已知宽度和高度的元素水平垂直居中：

方法一：使用负外边距和百分比居中
将已知宽高的元素设置为据对定位，将left和top设置为父元素的一半即50%，此时元素的左上角的点位于父元素的中心点，这是将元素向左和向上分别移动元素的宽、高一半，margin-left：宽/2; margin-top:高/2; 最后将元素的中心点与父元素的中心点重合，即元素水平垂直居中。

#inner{
     400px;
    height: 300px;
    background: #0099FF;
    position: absolute;             
    top: 50%; left: 50%;
    margin: -150px 0 0 -200px;
    overflow: auto;
    /*
    overflow属性介绍：
    visible 内容不会被修剪，会呈现在元素框之外。
    hidden  内容会被修剪，但是浏览器不会显示供查看内容的滚动条。
    scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto    由浏览器决定如何显示。如果需要，则显示滚动条。*/
            }
    <body>
        <div id="inner">            
        </div>
    </body>

这里写图片描述

方法二：使用绝对定位水平垂直居中
将元素设置为absolute定位，设置top、right、bottom和left的值都为0px；利用margin的自适应来使得元素水平垂直居中。

#inner{
     400px;
    height: 300px;
    background: #09F;
    position: absolute;
    top: 0px; bottom: 0px;
    left: 0px; right: 0px;
    margin: auto;
    overflow: auto;
}
<body>
    <div id="inner"></div>
</body>

这里写图片描述

方法三：用元素绝对定位浏览器中水平垂直居中
将元素设置为fiexd定位，设置top、right、bottom和left的值都为0px；利用margin的自适应来使得元素水平垂直居中。

.fixd{
     400px;
    height: 300px;  
    position: fixed;
    background-color: #0000FF;
    z-index: 999;
    top: 0px; bottom: 0px;
    left: 0px; right: 0px;
    overflow: auto;
    margin: auto;           
}       
<body>
    <div class="fixd"></div>
</body>

这里写图片描述

1.让未知宽度和高度的元素水平垂直居中：

方法一：利用display: table-cell让元素渲染为表格单元格
利用display的table-cell属性将未知宽高的元素渲染成为表格单元格的形式，然后设置文本 text-align:center;水平居中； vertical-align:middle; 垂直居中。注意要将元素设置为inline-block类型。

.out{
     600px;
    height: 600px;
    background: #AEC1CC;
    display: table-cell;
    /*display:table-cell;属性值可以让元素渲染为表格单元格   */          
    text-align:center;
    vertical-align:middle; 
}
.inner{
    background: red;    
    display: inline-block;
}

这里写图片描述

方法二：transform:translate()水平垂直居中
一般使用百分比单位的时候都是相对父元素来计算的但是在css里面有个比较特殊的属性是相对自身宽高来计算的。那就是transform:translate();所以利用百分比将元素左上角设置为父元素的中心点，再利用translate()将元素向上和向左移动一半。

.out{
     300px;
    height: 300px;
    background: #AEC1CC; 
    position: absolute; 
}
.inner{
    background: red;    
    position: absolute; 
    left:50%; top:50%;
    -webkit-transform:translate(-50%,-50%); 
    -ms-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);         
}
<div class="out">
    <div class="inner">
        两行文字居中<br/>
        第二行
    </div>
</div>

这里写图片描述

方法三：vertical-align:middle水平垂直居中
将添加一个元素让他的高度自适应为父元素的高度。最后将未知宽高的元素看做一个整体相对于父元素垂直居中。

.inner{
    background: red;    
    display: inline-block;
}
.out{
     400px;
    height: 400px;
    background: #AEC1CC;        
    text-align:center;
}
.ex{
    /*利用一个没有宽度b标签来实现水平垂直居中*/
    display: inline-block;
    *display:inline; 
    *zoom:1; 
    height: 100%;
     0px;
    vertical-align:middle; 
}
<div class="out">
    <b class="ex"></b>
    <div class="inner">
        两行文字居中<br/>
        第二行
    </div>
</div>

这里写图片描述