CSS 的垂直居中方法
提示
CSS 是每一个前端工程师都绕不过去的坎,熟练运用 CSS 后,实现同样一种效果我们可以有很多种写法,但由于兼容问题,通常简洁的写法并不能实现全平台统一效果,复杂的写法对性能又不太友好,导致我们在编写 CSS 过程中有很多需要注意的点,要踩很多的坑,因此用一个笔记来集中记录一下方法。
(为方便表达代码,在此定义 html 结构为:
<div class="parent">
<div class="target"></div>
</div>
默认的 css 样式为:
.parent {
background-color: #ccc;
width: 100%;
height: 400px;
}
.target {
background-color: #333;
width: 25%;
height: 100px;
}
行内元素 html 结构改为:
<div class="parent">
<label class="target">Duang</label>
</div>
css 样式改为:
.target {
background-color: #eee;
font-size: 25px;
}
以下无特殊说明的话结构都使用这个。
水平居中
1. 行内元素
只需要把行内元素包裹在一个属性 display 为 block 的父层元素中,并且把父层元素添加 text-align:center 即可:
.parent {
text-align: center;
}
2. 块状元素
对于块状元素来说,我们需要将它的左右外边距(即,margin-left,margin-right)设置为 auto,即可实现块状元素的居中,如下:
.target {
margin: 0 auto;
}
垂直居中
1. 行内元素单行居中
对于单行行内元素来说,垂直居中就是设定父元素行高等于其块状元素高度。
.parent {
line-height: 400px;
}
.target {
display: inline-block;
}
2. 行内元素多行居中
这个使用的手段是比较复杂的,我这里组合使用 display:table-cell 和 vertical-align:middle 属性来定义需要居中的元素的父容器元素,但是缺点有很多,比如这里因为格式变成了 table 类型,宽高必须设置成定值才行,希望有大佬提出更好的解决方法。
.parent {
display: table-cell;
width: 400px;
vertical-align:middle;
}
水平垂直居中
这里的方法同样适用于仅水平或者仅垂直居中。取与之相关的居中代码即可。
1. 最通用且实用的首选方法
在不知道自己高度和父容器高度的情况下,给父元素设置相对定位,子元素绝对定位,然后按照向右向下偏移的办法移到中心位置即可。
这里绝对定位的好处是无论父元素的实际高度以及子元素的个数,都能够完成覆盖型的居中显示。
代码示例如下:
.parent {
position: relative;
}
.target {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
(注:其实这里可以不用知道父子元素高度,为了方便显示才使用)
2. 已知父元素的高度,并且子元素有且只有一个
如果已知父元素的高度,并且子元素有且只有一个的话,完全可以只对子元素使用相对定位完成同样的效果:
.target {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. 多个子元素自适应的同时水平垂直居中
如果想实现多个子元素自适应的同时水平垂直居中,同时浏览器兼容性也支持的不错的话,推荐使用简单方便的 flex 布局。仅仅只设定父元素 display 属性为 flex 即可。
.parent {
display: flex;
align-items: center;
justify-content: center;
}
4. table-cell 方式
附加一个兼容性更好但是不太推荐的方法,就是由刚才多行行内元素垂直居中衍生出来的,再加一行行内水平居中的代码就能解决了。
.parent {
display: table-cell;
width: 400px;
vertical-align:middle;
text-align: center;
}
不太推荐的原因同垂直居中时说的。
而且想实现这个效果还不如直接用一个块状元素包裹这些行内元素,然后再用块状元素的水平垂直居中即可,当然显示方式可能会有少许的不同,自己斟酌使用吧~