CSS(Cascading Style Sheets)层叠样式表,是在1996年左右,W3C(万维网联盟)做HTML标准化的同时在HTML4.0之外开发的,拯救了当时越来越臃肿杂乱的HTML。
本文将按照由简单至复杂的顺序,展示在固定宽高的父容器中,实现单个子元素垂直水平居中的9种方式。
首先的HTML<body>部分都是<div>包含一个<p>:
<div class="box">
<p>I'm Centered</p>
</div>
为了方便观察,CSS部分默认给<div>加了固定宽高和边框,给<p>加了底色:
.box {
width: 300px;
height: 200px;
border: 1px solid;
}
p {
background: lightblue;
}
此时<p>是默认的块级盒子,撑满了内容所在的一整行:
默认效果,未居中,p标签没到顶是因为自带了外边距
要达到的效果
途径一:使用grid布局
- 父容器设置
align-items
justify-items
为center
,这个很好理解
.box {
width: 300px;
height: 200px;
border: 1px solid;
display: grid;
align-items: center;
justify-items: center;
}
p {
background: lightblue;
}
2. 同样的,也可以把 justify-items
属性换成 justify-content
,效果是一样的
.box {
width: 300px;
height: 200px;
border: 1px solid;
display: grid;
align-items: center;
justify-content: center;
}
p {
background: lightblue;
}
但它和上一条方法的实现方式略有差别,justify-content
会把子元素所在网格收缩到内容所撑开的宽度,而 justify-items
会把网格撑满父容器:
justify-content下的网格仅到达内容的宽度
justify-items下的网格撑满父容器
3. 直接在子元素上加 margin: auto;
应该是最简便的方法了,利用子元素的外边距撑满父容器
.box {
width: 300px;
height: 200px;
border: 1px solid;
display: grid;
}
p {
background: lightblue;
margin: auto;
}
途径二:使用flex布局
4. flex布局的方法和grid很像,但是flex布局中没有 justify-items
,所以只能用 justify-content
啦
.box {
width: 300px;
height: 200px;
border: 1px solid;
display: flex;
align-items: center;
justify-content: center;
}
p {
background: lightblue;
}
5. 同样的,也可以在子元素上加 margin: auto;
.box {
width: 300px;
height: 200px;
border: 1px solid;
display: flex;
}
p {
background: lightblue;
margin: auto;
}
途径三:使用table-cell布局
6. table-cell布局表现像一个表格的单元格,父容器中加上 vertical-align
垂直居中和文字 text-align
水平居中就是垂直水平居中啦
.box {
width: 300px;
height: 200px;
border: 1px solid;
display: table-cell;
vertical-align: middle;
text-align: center;
}
p {
background: lightblue;
}
但是这时候会发现一个问题,我们设置的底色却还是达到了父容器的左右两端:
底色未居中
如果对底色水平居中也有要求,可以把子元素转换为内联盒子 inline-block
.box {
width: 300px;
height: 200px;
border: 1px solid;
display: table-cell;
vertical-align: middle;
text-align: center;
}
p {
background: lightblue;
display: inline-block;
}
途径四:使用绝对定位
7. 子元素设置绝对定位,参考点是父容器,通过 left
top
定位到靠中间的位置
.box {
width: 300px;
height: 200px;
border: 1px solid;
position: relative;
}
p {
background: lightblue;
position: absolute;
left: 50%;
top: 50%;
}
定位后的位置,明显不在中心
接着移动子元素,向上向左各一半自己的高度和宽度
.box {
width: 300px;
height: 200px;
border: 1px solid;
position: relative;
}
p {
background: lightblue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
移动后,看起来水平居中了,但是垂直还差一点
还记得默认效果中<p>为什么没到顶吗?是的它的外边距又来捣乱了,我们把它取消掉就可以完全居中啦
.box {
width: 300px;
height: 200px;
border: 1px solid;
position: relative;
}
p {
background: lightblue;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
途(sǐ)径(lù)五:不推荐
8. 父容器设置文字水平居中,然后通过伪元素追加一个父容器高度的行高,最后子元素还要转换为内联盒子。或者行高加在父容器或子元素中,此时子元素要转为行内元素或取消外边距才行。由于过于复杂不推荐,故只展示一种情况的代码
.box {
width: 300px;
height: 200px;
border: 1px solid;
text-align: center;
}
.box::after {
content: '';
line-height: 200px;
}
p {
background: lightblue;
display: inline-block;
}
9. 体现CSS魅力的时候到了(雾
.box {
width: 300px;
height: 200px;
border: 1px solid;
position: relative;
}
p {
background: lightblue;
width: 100px;
height: 40px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
这种情况必须要给子元素设置宽高,仿佛所有的属性都是给底色围起来的框框设置的……肉眼可见效果并不好,而且代码繁琐。它存在的意义就是,当你考古时偶然遇到了,让你知道前辈费劲巴力写下的代码,其实就是想实现一个居中的效果……
你看出它偏了吗?
总结
前面的方法肯定是现在在用的大部分,眼熟后几种也不至于遇到就一脸萌逼:P
参考文献
1. 饥人谷 - 居中的多种实现
2. w3school - CSS 简介