CSS垂直居中的四种方法

HTML代码

/* 以下内容只写css样式 */
<div id="wrap">
     <div id="box">111</div>
</div>

1. 使用定位加位移，优点：元素不需要设置固定宽度

#wrap{
   width: 200px;
    height: 200px;
    background-color: #bfa;
    position: absolute; /* 2. 开启绝对定位，使子元素基于父元素定位*/
}
#box{
    background-color: pink;
    position: absolute; /* 1. 开启绝对定位 */
    left: 50%; /* 3. 向右偏移父元素宽度的50% */
    top: 50%; /* 4. 向下偏移父元素宽度的50% */
    transform: translate(-50%,-50%); /* 5. 使用translate根据自身的宽度向左位移50%，向上位移50%*/
}

2. 使用flex伸缩盒模型，缺点：IE10以下不兼容

#wrap{
    width: 200px;
    height: 200px;
    background-color: #bfa;
    display: flex; /* 1. 设置元素为伸缩盒模型 */
    justify-content: center; /* 2. 让元素沿主轴方向居中*/
    align-items: center;  /* 3. 让元素沿辅轴方向居中*/
}
#box{
   	background-color: pink;
}

3. 使用margin和定位，让浏览器计算位置，缺点：元素需要设置固定宽高

#wrap{
	width: 200px;
 	height: 200px;
    background-color: #bfa;
    position: absolute; /* 2. 开启绝对定位，使子元素基于父元素定位*/
}
#box{
   width: 100px;
   height: 100px;
   background-color: pink;
   position: absolute; /* 1. 开启绝对定位 */
   margin: auto; /* 3. 给元素设置为margin:auto让浏览器计算元素的位置 */
   left: 0; /* 4. 给元素的定位四个值都设置为0 让浏览器计算元素的位置 */
   top: 0; 
   right: 0; 
   bottom: 0;
}

4. 使用定位加外边距，缺点：元素需要设置固定宽度

#wrap{
    width: 200px;
    height: 200px;
    background-color: #bfa;
    position: absolute; /* 2. 开启绝对定位，使子元素基于父元素定位*/
}
#box{
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute; /* 1. 开启绝对定位 */
    left: 50%; /* 3. 向右位移父元素宽的50%*/
    top: 50%; /* 4. 向下位移父元素高的50%*/
    margin-left: -50px; /* 5. 向左移动自身宽度的一半*/
    margin-top: -50px; /* 6. 向上移动自身高度的一半*/
}