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

如何居中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》

转载请标注原文地址