【不同样的CSS】实现垂直布局的 8 种方式
若彼岸繁华落尽，谁陪我看落日流年
写在前面
对 CSS 布局把握程度决定你在 Web 研发中的研发页面速度。随着 Web 技术的持续革新，实现各样布局的方式已然多得数不堪数了。
近期利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文案总结了 CSS 中的各样布局，以及实现方式及其常用技巧。让你经过该系列文案对 CSS 布局有一个新的认识。
该系列的导航帖
里面能够快速转到你想认识的文案(意见保藏)
实现垂直布局的 8 种方式
1. 单行文本垂直居中
若文本为单行文本的话，直接使用 line-height 等于父元素的高度就可实现。示例代码如下：
HTML 代码
<div class="text">这是一个必须居中的测试文本</div>
CSS 代码
.text {
height: 200px;
font-size: 3rem;
font-weight: bold;
bac公斤round-color: #ff8787;
text-align: center;
/* 经过 line-height 等于元素高度就可完成文字垂直居中 */
line-height: 200px;
}
执行结果如下：
2. 行内块级元素垂直居中
若元素是行内块级元素, 基本思想是子元素运用 display: inline-block, vertical-align: middle 并让父元素行高等同于高度。示例代码如下所示：
HTML 代码
<div class="parent">
<div class="child"></div>
</div>
CSS 代码
.parent {
height: 500px;
width: 300px;
margin: 0 auto;
bac公斤round-color: #ff8787;
/* 为父级容器设置行高 */
line-height: 500px;
}
.child {
width: 300px;
height: 300px;
/* 将子级元素设置为 inline-block 元素 */
display: inline-block;
/* 经过 vertical-align: middle; 实现居中 */
vertical-align: middle;
bac公斤round-color: #91a7ff;
}
执行结果如下
3. 运用 position + top + height + -margin 实现垂直居中关于定位的知识，之前有一篇文案能够去看一下
| 
发表于 2024-6-30 06:21:55
