css实现垂直居中
程序员文章站
2022-06-21 11:21:36
html结构 默认css样式结构 1. table-cell 该方法兼容IE8+,火狐,谷歌,并且content是否有宽高都可以。 注:IE8+ 包含 IE8 2. display: flex; 该方法不兼容IE8,IE9,content是否有宽高都可以。兼容火狐、谷歌 参考flex布局:https ......
html结构
<div class="box box2"> <span class="content content2">垂直居中</span> </div>
默认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布局:
.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;}
参考网址:
上一篇: python之操作系统介绍,进程的创建
下一篇: 手机知识小科普 什么是三星双卡双待功能