h5文字垂直居中_CSS实现居中的几种方式你都了解吗？
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布局
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 简介
总结
以上是生活随笔为你收集整理的h5文字垂直居中_CSS实现居中的几种方式你都了解吗？的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： python提取字符串中数字_EXCEL
- 下一篇： 你知道CSS实现水平垂直居中的第10种方