子元素水平垂直居中的多种实现方法

马黑黑 · 发表于 2022-4-26 07:36

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-26 07:41 编辑

设有两个父子元素，现要求令子元素在父元素内水平、垂直两个方向都能居中，怎么实现？

方法一：使用Flex弹性布局的justify-content和align-items属性

<style type="text/css">
.out-box1 {
      width: 150px;
      height: 150px;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      border: 1px solid;
}
.inner-box1 {
      width: 100px;
      height: 100px;
      background: #333;
}
</style>

<div class="out-box1">
      <div class="inner-box1"></div>
</div>

此法，父子元素无position定位也不影响子元素居中。

方法二：父元素设display为inline-block并设定padding值

.out-box2 {
      display: inline-block;
      padding: 25px;
      border: 1px solid;
}
.inner-box2 {
      width: 100px;
      height: 100px;
      background: olive;
}

<div class="out-box2">
      <div class="inner-box2"></div>
</div>

此法不设置父元素宽高，其宽高将由自己的padding + 子元素的宽高决定。此法可变通，如设置子元素的margin值也能达到目的。

方法三：子元素margin auto + 上下左右0

.out-box3 {
      position: relative;
      width: 150px;
      height: 150px;
      border: 1px solid;
}
.inner-box3 {
      position: absolute;
      width: 100px;
      height: 100px;
      margin: auto;
   left:0;
      top: 0;
      right: 0;
      bottom: 0;
      background: olive;
}

此法，要求父元素position设为 relative、子元素absolute，子元素的left、top、right、bottom都设为0，并将margin设为auto即可。

方法四：用transform之translate腾挪大法

.out-box4 {
      width: 150px;
      height: 150px;
      border: 1px solid;
}
.inner-box4 {
      width: 100px;
      height: 100px;
      transform: translate(25px,25px);
      background: olive;
}

<div class="out-box4">
      <div class="inner-box4">4</div>
</div>

此法代码量极少，重点在于根据父子元素的尺寸计算偏移量。例中，父元素宽高均大于子元素50个像素，按初始位置，子元素左边、上边与父元素左边、上边相切，xy两个方向各挪动25像素便可居中。计算公式为（以宽度为例）：(父元素宽度-子元素宽度)/2

方法五：定位大法

.out-box5 {
      width: 150px;
      height: 150px;
      border: 1px solid;
}
.inner-box5 {
      position: relative;
      width: 100px;
      height: 100px;
      left: 25px;
      top: 25px;
      background: olive;
}

<div class="out-box5">
      <div class="inner-box5">5</div>
</div>

此法至少要求子元素拥有position属性，如果父元素没有position属性设置，则子元素的position值只能是relative，若父元素有position设定，则子元素设position为relative或absolute均可。建议父子元素都有relative或absolute定位。

方法五的左右（left和top）的计算方法同方法四。当存在某一盒子尺寸可能不能确定时，可考虑使用CSS的calc函数实现动态定位。例如，假设我们不知道父元素的宽高，则：

left: calc(50% - 25px);
top: calc(50% - 25px);

扩展知识：

① 【line-height】当一个元素设定了 line-height 值与 width 值相等，则针对单行文本，文本垂直居中；
② 【text-align: center】文本整体水平居中
③ 【display: table-cell】赋予元素表格属性，元素拥有表格的一些特性