在实际工作过程中经常会碰到水平垂直居中的问题,这里手机总结了几种水平垂直居中的常用方法。

如何居中div

  • 水平居中:给div设置一个宽度,然后添加margin:0 auto属性
div{
    width:200px;
    margin:0 auto;
}
  • 让绝对定位的div居中
div {
    position: absolute;
    width: 300px;
    height: 300px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: pink;    /* 方便看效果 */
}

垂直居中

一、单行文本垂直居中

<div id="parent"><div id="child">Content here</div></div>
#child {
line-height: 200px;
}

二、垂直居中一张图片

<div id="parent"><img src="image.png" alt="" /></div>
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}

以下CSS代码,都以本HTML为基础:

<div id="parent"><div id="child">Content here</div></div>

三、块级元素

#parent {
        position: relative;
        height: 200px;
        width: 200px;
       background: #090;
    }

#child {
       background: #900;
        position: absolute;
        top: 50%;
        left: 50%;
        height: 30%;
        width: 50%;
        margin: -15% 0 0 -25%;
    }

四、通用

#parent {
border: 1px #111 solid;
height: 200px;
display: table;
}

#child {
/* 无法设置宽高*/
display: table-cell;
vertical-align: middle;
}

五、通用,但在IE版本低于7时不能正常工作

#parent {
        position: relative;
        height: 200px;
        width: 200px;
        background: #090;
    }

#child {
    background: #900;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

六、通用

#parent {
        background: #090;
        padding: 5% 0;
    }

#child {
    background: #900;
    padding: 10% 0;
}

七、通用

<div id="parent">
    <div id="floater"></div>
    <div id="child">Content here</div>
</div>
#parent {
        background: #090;
        height: 250px;
    }

#child {
        background: #900;
        clear: both;
        height: 100px;
    }

#floater {
        float: left;
        height: 50%;
        width: 100%;
        margin-bottom: -50px;
    }

水平垂直居中

  • 水平垂直居中一

确定容器的宽高 宽500 高 300 的层,设置层的外边距

div {
    position: relative;        /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -250px;         /* 外边距为自身宽高的一半 */
    background-color: pink;         /* 方便看效果 */
}
  • 水平垂直居中二

未知容器的宽高,利用 transform 属性

div {
    position: absolute;        /* 相对定位或绝对定位均可 */
    width:500px;
    height:300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;         /* 方便看效果 */
}
  • 水平垂直居中三

利用 flex 布局,(实际使用时应考虑兼容性)

.container {
    display: flex;
    align-items: center;         /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
}
.container div {
    width: 100px;
    height: 100px;
    background-color: pink;        /* 方便看效果 */
}

参考文章《vertical-centering》