css实现垂直居中的6种方法（代码示例）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css实现垂直居中的6种方法（代码示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1703字，纯文字阅读大概需要3分钟。

内容图文

html结构

<p class="box box2">
    <span class="content content2">垂直居中</span></p>

默认css样式结构

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

1. table-cell

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

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

2. display: flex;

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

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

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

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实现垂直居中的6种方法（代码示例）的详细内容。

内容总结

以上是互联网集市为您收集整理的css实现垂直居中的6种方法（代码示例）全部内容，希望文章能够帮你解决css实现垂直居中的6种方法（代码示例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端