各种元素水平垂直居中

来源：互联网发布：网络拓扑图图片编辑：程序博客网时间：2024/06/05 05:11

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

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

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

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

这里写图片描述

0 0