欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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;   //上下居中        
}

css实现垂直居中

2. display: flex;      该方法不兼容ie8,ie9content是否有宽高都可以。兼容火狐、谷歌

参考flex布局:

.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;}

参考网址: