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