css实现垂直居中的方法有哪些-创新互联

小编给大家分享一下css实现垂直居中的方法有哪些，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

成都创新互联公司专注于企业成都全网营销、网站重做改版、嵩明网站定制设计、自适应品牌网站建设、HTML5、商城网站开发、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为嵩明等各大城市提供网站开发制作服务。

html结构

垂直居中

默认css样式结构

.box{
    width:200px;
    height:200px;
    background-color:green;   
}
.content{
    background-color:yellow;   
}

1. table-cell

该方法兼容IE8+，火狐，谷歌，并且content是否有宽高都可以。 注：IE8+ 包含 IE8

.box2{
    display:table-cell;      //此元素会作为一个表格单元格显示（类似  和 ）
    text-align:center;       //左右居中
    vertical-align:middle;   //上下居中        
}

css实现垂直居中的方法有哪些

2. display: flex;

该方法不兼容IE8，IE9，content是否有宽高都可以。兼容火狐、谷歌

参考flex布局：https://www.cnblogs.com/qingchunshiguang/p/8011103.html

.box2{
    display: flex;
    justify-content:center;  //左右居中
    align-items:center;      //上下居中
}

css实现垂直居中的方法有哪些

3. 绝对定位和负边距

该方法兼容IE8+，火狐，谷歌，content必须有宽高。

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-40px;
    margin-left:-40px;
}

4. 绝对定位和0

该方法兼容IE8+，火狐，谷歌，content必须有宽高。

.box2{
    position:relative;
}
.content2{
    margin:auto;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

5. 绝对定位和transform

该方法不兼容IE8，兼容IE9+，火狐，谷歌，content是否有宽高都可以。

.box2{
    position:relative;
}
.content2{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

6.display:flex 和 margin:auto

content有宽高：不兼容IE8，IE9，content没有宽高：不兼容IE。有无宽高都兼容火狐、谷歌。

.box2{
    display: flex;
    text-align: center;
}
.box2 .content2{margin: auto;}

看完了这篇文章，相信你对css实现垂直居中的方法有哪些有了一定的了解，想了解更多相关知识，欢迎关注创新互联网站制作公司行业资讯频道，感谢各位的阅读！

文章名称：css实现垂直居中的方法有哪些-创新互联
地址分享：http://6mz.cn/article/ccdjos.html

网站建设知识