【不一样的CSS】实现居中布局的 8 种方式

时间:2021-10-28 来源:未知网络 作者:996建站网

【不一样的CSS】实现居中布局的 8 种方式

若彼岸繁华落尽,谁陪我看落日流年

写在前面

对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新,实现各种布局的方式已经多得数不胜数了。

最近利用碎片时间,大概用了半个月的时间整理了一个系列,本系列文章总结了 CSS 中的各种布局,以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。

该系列的导航帖

里面可以快速跳转到你想了解的文章(建议收藏)

实现居中布局的 8 种方式1. 使用 text-align 属性

若元素为行内块级元素,也就是 display: inline-block 的元素,可以通过为其父元素设置 text-align: center 实现水平居中。示例代码如下

HTML 代码

<div class="parent">
  <div class="child"></div>
</div>

【不一样的CSS】实现居中布局的 8 种方式插图

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序