数码屋头条

居中布局：水平居中和垂直居中

2022-12-04 14:51 由 beckyye 发表于 #前端开发

居中布局在实际场景中很常见，在面试当中也经常会被考察。

以下分别是水平居中和垂直居中常用的样式。

水平居中

margin: 0 auto; + width 应用于块级元素居于容器中间

  • 若节点不是块级元素，需声明display: block
  • 若节点宽度已隐式声明则无需显式声明width
<div class="h-c1">
    <p>谈笑有鸿儒，往来无白丁。谈笑有鸿儒，往来无白丁。</p>
</div>

.h-c1 {
  margin: 0 auto;
  width: fit-content; // 300px;
  background-color: #fcc;
}

text-align: center; 应用于行内元素居中

  • 父节点声明text-align
  • 若节点不是行内元素需声明display: inline/inline-block

使行内元素居于父级容器中间，可用于使文本内容水平居中。

<div class="h-c3">
    <span>谈笑有鸿儒，往来无白丁。谈笑有鸿儒，往来无白丁。</span>
</div>

.h-c3 {
  text-align: center;
  background-color: #fc0;
}

position + left/right + margin-left/right + width：应用于全部元素

  • 适用于父子元素的宽度都确定的情况
  • 子绝父相。父：position: relative，子：position: absolute。
<div class="h-c4">
    <div class="h-c4-child">
        <span>谈笑有鸿儒，往来无白丁。谈笑有鸿儒，往来无白丁。</span>
    </div>
</div>

.h-c4 {
    position: relative;
    width: 500px; /*或者宽度隐式声明*/
    height: 30px;

    .h-c4-child {
      position: absolute;
      width: 300px;
      left: 50%; /* 相对于父元素的宽度 */
      margin-left: -150px; /* 子元素宽度的一半的负数 */
      background-color: #fbf;
    }
}

position + left/right + transform: translateX(-50%)：应用于全部元素

  • 适用于父元素宽度确定的情况
  • 子元素未设置宽度时，默认为父元素宽度的一半
  • 子绝父相。父：position: relative，子：position: absolute。
<div class="h-c5">
    <p class="h-c5-child">谈笑有鸿儒，往来无白丁。谈笑有鸿儒，往来无白丁。</p>
</div>

.h-c5 {
    position: relative;
    width: 600px; /*或者宽度隐式声明*/
    height: 50px;
    background-color: #fbe;

    .h-c5-child {
      position: absolute;
      left: 50%; /* 相对于父元素的宽度 */
      transform: translateX(-50%); /* 相对于自己的宽度 */
      background-color: #fbf;
    }
}

display: flex + justify-content: center：应用于全部元素的子节点（弹性布局）

<div class="h-c6">
    <p>谈笑有鸿儒，往来无白丁。谈笑有鸿儒，往来无白丁。</p>
</div>

.h-c6 {
    display: flex;
    justify-content: center;
    background-color: yellowgreen;
}

垂直居中

padding-top/bottom：应用于块级元素

  • 父元素高度由子元素高度撑开（自适应）
  • 子元素设置padding-top和padding-bottom相等
  • 若节点不是块级元素需声明display: block
<div class="v-c1">
  <div class="v-c1-child">
    <span>谈笑有鸿儒，往来无白丁。谈笑有鸿儒，往来无白丁。</span>
  </div>
</div>

.v-c1 {
    background-color: #ffcc00;
    .v-c1-child {
      padding: 20px 0;
      background-color: #fff;
      background-clip: content-box;
    }
}

line-height：应用于行内元素

  • 父节点声明line-height。line-height与height相等
  • 若节点不是行内元素需声明display: inline/inline-block

使行内元素居于父级容器中间，可用于使文本内容垂直居中。

<div class="v-c2">
    <span>谈笑有鸿儒，往来无白丁。谈笑有鸿儒，往来无白丁。</span>
</div>

.v-c2 {
  height: 100px;
  line-height: 100px;
  background-color: #6666ff;

  span {
    display: inline-block; /* 或inline */
    height: 30px;
    line-height: 30px;
    vertical-align: middle; /* 行内块级元素与匿名行内盒的基线对齐存在很大差异，所以需声明vertical-align:middle将其调整到垂直居中的位置 */
    background-color: red;
  }
}

display: table + display: table-cell + vertical-align: middle：应用于全部元素

<div class="v-c3">
    <div class="v-c3-child">display:table + display:table-cell + vertical-align:middle</div>
</div>

.v-c3 {
  display: table;
  height: 100px;
  background-color: #6666ff;

  .v-c3-child {
    display: table-cell;
    height: 50px; /* 设置高度无用，会与父节点高度一样 */
    vertical-align: middle;
    background-color: red;
  }
}

display: table-cell + vertical-align: middle：应用于全部元素的子节点

  • 父节点声明display: table-cell模拟表格布局的垂直居中
<div class="v-c4">
    <div>display:table-cell + vertical-align:middle</div>
</div>

.v-c4 {
  height: 100px;
  display: table-cell;
  vertical-align: middle;
  background-color: bisque;
}

position + top/bottom + margin-top/bottom + height：应用于全部元素

  • 适用于父子元素的高度都确定的情况
  • 子绝父相。父：position: relative，子：position: absolute。
<div class="v-c5">
    <div class="v-c5-child">position + top/bottom + margin-top/bottom + height</div>
</div>

.v-c5 {
  position: relative;
  height: 100px;
  background-color: coral;

  .v-c5-child {
    position: absolute;
    top: 50%; /* 相对于父元素的高度 */
    height: 70px;
    margin-top: -35px; /* 子元素高度的一半的负数 */
    background-color: #6666ff;
  }
}

position + top/bottom + transform: translateY(-50%)：应用于全部元素

  • 适用于父元素高度确定的情况
  • 子绝父相。父：position: relative，子：position: absolute。
<div class="v-c6">
    <div class="v-c6-child">position + top/bottom + transform:translateY(-50%)</div>
</div>

.v-c6 {
  position: relative;
  height: 100px;
  background-color: #ffcc00;

  .v-c6-child {
    position: absolute;
    top: 50%; /* 相对于父元素的高度 */
    transform: translateY(-50%); /* 相对于自己的高度 */
    background-color: #6666ff;
  }
}

display: flex + align-item: center：应用于全部元素的子节点（弹性布局）

<div class="v-c7">
    <div>display: flex;</div>
    <span>display: flex;</span>
</div>

.v-c7 {
  display: flex;
  align-items: center;
  height: 100px;
  background-color: #ffbb00;
}

display: flex + margin: auto 0：应用于全部元素

  • 父节点声明display: flex;
  • 子节点声明margin: auto 0;
<div class="v-c8">
    <span class="v-c8-child">display: flex; margin: auto 0;</span>
</div>

.v-c8 {
  display: flex;
  height: 100px;
  background-color: #ffbbff;

  .v-c8-child {
    margin: auto 0; /* 只设置auto 可以让水平和垂直都居中 */
  }
}

父节点声明display: flex生成FFC容器，子节点声明margin: auto让浏览器自动计算子节点到父节点边上的距离。

热门相关：斗神战帝   刺客之王   刺客之王   霸皇纪   寂静王冠