这次给大家带来常用的CSS实现垂直居中的4种方法，CSS实现垂直居中的注意事项有哪些，下面就是实战案例，一起来看一下。
行高line-height实现单行文本垂直居中
以前一直认为单行文本垂直居中要将高度和行高设置成相同的值，但高度其实没必要设置。实际上，文本本身就在一行中居中显示。在不设置高度的情况下，行高撑开高度。
<style>
.test{
line-height: 50px;
background-color: lightblue;
}
</style>
<p class="test">测试文字</p>登录后复制
设置vertical-align:middle实现垂直居中
【1】设置父元素的display为table-cell
通过为table-cell元素设置vertical-align:middle，可使其子元素均实现垂直居中。这和表格里单元格的垂直居中是类似的
[注意] 若要IE7-浏览器支持，则可以将其改为
表格结构
[注意] 设置为table-cell的p不能使用浮动或绝对定位，因为浮动或绝对定位会使元素具有块级元素特性，从而丧失了table-cell元素具有的垂直对齐的功能。
若需要浮动或绝对定位处理，则需要外面再套一层p。
<style>
.parent{
display: table-cell;
vertical-align: middle;
}
</style>
<p class="parent" style="background-color: gray;height: 100px;">
<p class="child" style="background-color: lightblue;">我是有点长的有点长的有点长的有点长的测试文字</p>
</p>登录后复制
【2】若子元素是图片，通过设置父元素的行高来代替高度，且设置父元素的font-size为0。
vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2 父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。
所以，当字体大小较大时，这种差异就更明显。当 font-size为0时，相当于把字符X的字体大小设置为0，于是可以实现完全的垂直居中。
<style>
.parent{
line-height: 100px;
font-size: 0;
}
.child{
vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray;width:200px;">
<img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</p>登录后复制
【3】通过新增元素来实现垂直居中的效果
新增元素设置高度为父级高度，宽度为0，且同样设置垂直居中vertical- align:middle的inline-block元素。由于两个元素之间空白被解析，所以需要在父级设置font-size:0，在子级再将 font-size设置为所需值；若结构要求不严格，则可以将两个元素一行显示，则不需要设置font-size:0。
<style>
.parent{
height: 100px;
font-size: 0;
}
.child{
display: inline-block;
font-size: 20px;
vertical-align: middle;
}
.childSbling{
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
<p class="parent" style="background-color: lightgray; width:200px;">
<p class="child" style="background-color: lightblue;">我是比较长的比较长的多行文字</p>
<i class="childSbling"></i>
</p>登录后复制
思路三：通过绝对定位实现垂直居中
【1】若子元素不定高， 使用top50%配合translateY(-50%)可实现居中效果。
translate函数的百分比是相对于自身高度的，所以top:50%配合translateY(-50%)可实现居中效果。
[注意] IE9-浏览器不支持；
[注意]若子元素的高度已知，translate()函数也可替换为margin-top: 负的高度值。
<style>
.parent{
position:relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>登录后复制
【2】若子元素定高，结合绝对定位的盒模型属性，实现居中效果
<style>
.parent{
position: relative;
}
.child{
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
height: 50px;
}
</style>
<p class="parent" style="background-color: lightgray; height:100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>登录后复制
<关于增加p层级的说明>
在水平居中对齐中，元素外层套一层p并设置absolute，元素设置负margin-left或者relative的负left属性，可以实现水平居中的效果。但由于margin是相对于包含块宽度的，这样margin-top:-50%得到的是宽度而不是高度的-50%，所以不可行；对于relative的百分比取值而言，在包含块高度为auto的情况下，chrome、safari和IE8+浏览器都不支持设置元素的百分比top值，所以也不可行。
思路四：使用弹性盒模型flex实现垂直居中
[注意] IE9-浏览器不支持
【1】在伸缩容器上设置侧轴对齐方式align-items: center
<style>
.parent{
display: flex;
align-items: center;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>登录后复制
【2】在伸缩项目上设置margin: auto 0
<style>
.parent{
display: flex;
}
.child{
margin: auto 0;
}
</style>
<p class="parent" style="background-color: gray; height: 100px;">
<p class="child" style="background-color: lightblue;">测试文字</p>
</p>登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
css3的pointer-events使用详解
focus-within的使用详解
CSS3做出无缝轮播广告
以上是常用的CSS实现垂直居中的4种方法的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
vue中怎么用bootstrap
Apr 07, 2025 pm 11:33 PM
在 Vue.js 中使用 Bootstrap 分为五个步骤：安装 Bootstrap。在 main.js 中导入 Bootstrap。直接在模板中使用 Bootstrap 组件。可选：自定义样式。可选：使用插件。
bootstrap怎么写分割线
Apr 07, 2025 pm 03:12 PM
创建 Bootstrap 分割线有两种方法：使用 标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
bootstrap怎么插入图片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。
bootstrap怎么设置框架
Apr 07, 2025 pm 03:27 PM
要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。
bootstrap怎么调整大小
Apr 07, 2025 pm 03:18 PM
要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-
bootstrap按钮怎么用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本
See all articles
