CSS各类居中方案

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

前言

• 上篇我们一起学习了BFC区域
• 这篇我们一起来学习一下CSS的居中方案

水平居中

• 情景一

  • 父元素是块级元素
  • 子元素为行内元素，子元素的宽度由内容撑开
  • 解决方案
    • 给父元素设置text-align: center

---

• 情景二
  • 子元素是块级元素且宽度固定
  • 解决方案
    • 给子元素添加margin: 0 auto

---

• 情景三
  • 子元素是块级元素且宽度固定
  • 解决方案
    • 父相子绝定位 子元素left:50% transform: translate(-50%)

<div class="parent">
    <div class="children">Children</div>
</div>
<style>
    .parent {
        width: 300px;
        height: 500px;
        background-color: blanchedalmond;
        position: relative;
    }
    .children {
        width: 100px;
        background-color: blueviolet;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
    }
</style>

垂直居中

• 情景一
  • 子元素是行内元素，高度由内容撑开
  • 解决方案
    • 子元素设置line-height: 高度与父元素一样高

• 情景二
  • 子元素是行内元素，高度由内容撑开
  • 有多个子元素
  • 解决方案
    • 父级元素设置 display:inline||inline-block||table-cell
    • 父元素设置居中vertical-align:middle

• 情景三
  • 子元素是块级元素且高度已经设定
  • 解决方案

    • 父相子绝定位 子元素设置 top:50%;transform: translateY(-50%)

垂直和水平同时居中

• 情景一
  • 子元素在父元素中水平垂直居中
  • 解决方案
    • 父相子绝定位 子元素设置 top: 50%;left: 50%;transform:translate(-50%,-50%);

• 情景二
  • 子元素是块级元素且高度已经设定
  • 解决方案 (flex布局)
    • 父元素设置 display: flex;justify-content: center;align-items:center;

结语

• 感谢各位大佬的阅读 如果文章对你有帮助 可以点个赞