蹦蹬儿你个蹦蹬儿

垂直居中布局的几种css实现方法

阅读量:

在开发中经常会需要实现一些居中布局问题,今天来总结一下垂直居中布局的css实现方法。

任意高度的垂直居中布局

1.父元素tabel-cell +vertical-align

此方法的优点:兼容性好,兼容ie8+。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
.parent{
<!-- 样式内容省略 -->
display: tabel-cell;
vertical-align:middle;
}
.child{
<!-- 样式内容省略 -->
}
</style>
<div class="parent">
<div class="child">DEMO</div>
</div>


2. absolute + transform

优点:不会干扰其他元素
缺点:兼容性不好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.parent{
<!-- 样式内容省略 -->
position:relative;
}
.child{
<!-- 样式内容省略 -->
position: absolute;
top: 50%;
transform: translateY(-50%);

}
</style>
<div class="parent">
<div class="child">DEMO</div>
</div>


3.flex+align-items

优点:和第一种方法一样只需要对父元素设置
缺点:兼容性不好

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
.parent{
<!-- 样式内容省略 -->
display: flex;
align-items:center;
}
.child{
<!-- 样式内容省略 -->
}
</style>
<div class="parent">
<div class="child">DEMO</div>
</div>


固定高度的垂直居中布局

这个用以上的方法也可以,不过我比较喜欢用负margin实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
.parent{
<!-- 样式内容省略 -->
position:relative;
}
.child{
<!-- 部分样式内容省略 -->
height:200px;
position: absolute;
top: 50%;
margin-top:-100px;
}
</style>
<div class="parent">
<div class="child">DEMO</div>
</div>


总结了几种方法,各有利弊,还是那句话:具体情况具体分析~

ps:增加了运行代码的功能 更好的代码功能还在研究当中。

陈柯伊

梦想一克拉 热血一卡车 眼泪一酒瓶 熬夜一光年

评论

文章目录