CSS垂直居中的实现方式

in css with 0 comment views: 409 times

https://www.cnblogs.com/zhouhuan/p/vertical_center.html

使用绝对定位和负外边距对块级元素进行垂直居中

必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中。

<div id="box">
    <div id="child">我是测试DIV</div>
</div>
#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 150px;
    height: 100px;
    background: orange;
    position: absolute;
    top: 50%;
    margin: -50px 0 0 0;
    line-height: 100px;
}

另外一种使用绝对定位和负外边距进行垂直居中的方式

margin的取值也可以是百分比,这时这个值规定了该元素基于父元素尺寸的百分比,可以根据实际的使用场景来决定是用具体的数值还是用百分比。

<div id="box">
    <div id="child">我也是个测试DIV</div>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
  width: 50%;
    height: 30%;
    background: pink;
    position: absolute;
    top: 50%;
    margin: -15% 0 0 0;
}

使用绝对定位和transform

这种方法有一个非常明显的好处就是不必提前知道被居中元素的尺寸了,因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

<div id="child">
    我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    background: #93BC49;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

绝对定位结合margin: auto

把要垂直居中的元素相对于父元素绝对定位,top和bottom设为相等的值,我这里设成了0,当然你也可以设为99999px或者-99999px无论什么,只要两者相等就行,这一步做完之后再将要居中元素的margin设为auto,这样便可以实现垂直居中了。

  被居中元素的宽高也可以不设置,但不设置的话就必须是图片这种自身就包含尺寸的元素,否则无法实现。
  

<div id="box">
    <div id="child">呆呆今天退役了(。﹏。)</div>
</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    position: relative;
}
#child {
    width: 200px;
    height: 100px;
    background: #A1CCFE;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    line-height: 100px;
}

使用flex布局

<div id="box">雾霾天气,太久没有打球了</div>

#box {
    width: 300px;
    height: 300px;
    background: #ddd;
    display: flex;
    align-items: center;
}

使用 line-height 对单行文本进行垂直居中

<div id="box">
    我是一段测试文本
</div>


#box{
    width: 300px;
    height: 300px;
    background: #ddd;
    line-height: 300px;
}

使用 line-height 和 vertical-align 对图片进行垂直居中

<div id="box">
    <img src="duncan.jpeg">
</div>

#box{
    width: 300px;
    height: 300px;
    background: #ddd;
    line-height: 300px;
}
#box img {
    vertical-align: middle;
}
Responses