前情提要
最近在改页面样式时,经常用到弹性布局,那用起来可太舒服了。改着改着又想起来了,我曾经磕磕巴巴修改样式的岁月,当时没有flex,每次要垂直居中都很费劲,还要面临各种各样的布局问题,今天想起来正好总结一下。
PS:为了方便大家查看,我会把差不多的垂直居中方法,按顺序排在一起,方便大家看。
flex垂直居中法
这个是css3出了以后涌现的新属性,用起来非常得劲儿,各种布局都能搞,小伙伴们感兴趣可以去了解一下。
<html>
<style>
.parent {
width: 400px;
height: 200px;
border: solid 1px;
/* 垂直居中 */
display: flex;
align-items: center;
}
</style>
<body>
<div class="parent">
<div>flex垂直居中法</div>
</div>
</body>
</html>
grid垂直居中法
该属性也是css3后涌现的,和flex一样各种布局都能搞,缺点就是支持性比flex更差一点。
<html>
<style>
.parent {
width: 400px;
height: 200px;
border: solid 1px;
/* 垂直居中 */
display: grid;
align-items: center;
}
</style>
<body>
<div class="parent">
<div>grid垂直居中法</div>
</div>
</body>
</html>
translateY垂直居中法
该属性也是css3的方法,是通过与边距属性结合来实现的,这个边距可以是 margin、padding ,或是设置了绝对定位的 top、bottom 。
<html>
<style>
.parent {
width: 400px;
height: 200px;
border: solid 1px;
}
.child {
/* 垂直居中 */
padding-top: 50%;
transform: translateY(-50%);
}
</style>
<body>
<div class="parent">
<div class="child">translateY垂直居中法</div>
</div>
</body>
</html>
table-cell垂直居中法
该方法是通过与 vertical-align: middle 属性结合实现的,简单理解就是把 div 当成了一个单元格,并通过 vertical-align 属性实现了居中变化
<html>
<style>
.parent {
width: 400px;
height: 200px;
border: solid 1px;
/* 垂直居中 */
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="parent">
<div>table-cell垂直居中法</div>
</div>
</body>
</html>
writing-mode垂直居中法
该方法是通过修改 writing-mode 属性,改变文字排列方向的方式实现居中,缺点是需要将子级元素修改为内联元素。
<html>
<style>
.parent {
width: 400px;
height: 200px;
border: solid 1px;
/* 垂直居中 */
writing-mode: vertical-lr;
text-align: center;
}
.child {
display: inline-block;
writing-mode: horizontal-tb;
}
</style>
<body>
<div class="parent">
<div class="child">writing-mode垂直居中法</div>
</div>
</body>
</html>
absolute垂直居中法
该方法是通过与外边距margin:auto属性结合实现居中的,但缺点是子级元素必须有高度,如果子级是自扩展高就没办法了。
<html>
<style>
.parent {
width: 400px;
height: 200px;
border: solid 1px;
position: relative;
}
.child {
height: 20px;
/* 垂直居中 */
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
</style>
<body>
<div class="parent">
<div class="child">absolute垂直居中法</div>
</div>
</body>
</html>
line-height垂直居中法
该方法与 absolute 垂直居中法对应,他的缺点是必须知道父级元素的高度,如果父级是自扩展高就没办法了。
<html>
<style>
.parent {
width: 400px;
height: 200px;
border: solid 1px;
/* 垂直居中 */
line-height: 200px;
}
</style>
<body>
<div class="parent">
<div>line-height垂直居中法</div>
</div>
</body>
</html>
padding垂直居中法
这个是我刚入行时常用的方法,缺点是必须知道父级元素高和元素高,算是比较新手的方法。
<html>
<style>
.parent {
width: 400px;
height: 200px;
border: solid 1px;
/* 垂直居中 */
box-sizing: border-box;
padding-top: 90px; /* (父级高 - 子级高) / 2 */
}
.child{
height: 20px;
}
</style>
<body>
<div class="parent">
<div class="child">padding垂直居中法</div>
</div>
</body>
</html>