DiV实现垂直集中的方式

最近一直在练习网页布局，总结了div用法中常用到实现垂直集中的三种方式，现在代码如下，和大家一一分享，有什么问题，大家可以在讨论区留言讨论，有不足之处，请多指教~

itemitemitemitemitemitemitemitemitem

itemitemitemitemitemitemitemitemitemitem

itemitemitemitemitemitemitem

boxCont

实现子元素div.item在父元素div.box里面的垂直居中

方法一：已知子元素div的宽高，实现垂直居中

.box{width:600px;height:600px;border:1px solid #ff0000;}
.item{width:200px;height:200px;border:1px solid #ff0000;}

直接使用position:absolute的方式进行定位，然后margin进行偏移，兼容性比较好，具体代码如下：

    .box{position:relative;}
    .item{
 position:absolute;
 top:50%;
 left:50%;
 margin-left:-100px;
 margin-top:-150px;
    }

实现效果如下：

方法二：未知子元素div的宽高，实现垂直居中

.box{width:600px;height:600px;border:1px solid #ff0000;}
.item{border:1px solid #ff0000;}

还是需要使用position进行定位，然后用transform: translate(-50%,-50%);
至于translate如何实现垂直居中，可以查询w3c的基础教程，但是考虑到兼容性，以下代码是兼容性比较强的写法

    .box{position:relative;}
    .item{
 position:absolute;
 top:50%;
 left:50%;
 -webkit-transform: translate(-50%,-50%); 
 -moz-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%,-50%); 
 -o-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);      
    }

以下是实现效果：

方法三：未知子元素div的宽高，实现垂直居中

.box{width:600px;height:600px;border:1px solid #ff0000;}
.item{border:1px solid #ff0000;}

使用display：flex的方式，Flex意为弹性布局，相对于传统的盒子模型，可以更好地响应式的处理好网页布局。这里只讲Flex是如何实现垂直居中的。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
使用flex实现垂直居中的代码实现如下：

  .box{
    display: flex;
    justify-content: center;
    align-items: center;
}

兼容性比较强的写法如下：

.box{
    display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
}

实现效果一样

方法四：
使用display: inline-block;

.box{width:600px;height:600px;border:1px solid #ff0000;
  text-align: center;}
.item{border:1px solid #ff0000;}
  .box:after{display: inline-block;  
  vertical-align: middle; 
  content: '';
  height: 100%;
  }  
    .item{
    display: inline-block;  
  }

DiV实现垂直集中的方式

CSS教程相关栏目本月热门文章