元素上下左右居中几种方式

create by db on 2020-8-28 19:00:54
Recently revised in 2020-8-28 19:00:58

闲时要有吃紧的心思，忙时要有悠闲的趣味

前言
正文
- 子元素上下左右居中几种方式
总结

前言

作为一个前端切图仔，页面布局是必会技能之一。本文总结了部分常用的盒模型上下左右居中几种方式。现分享给大家，以供参考。

正文

子元素上下左右居中几种方式

1.绝对定位

返回目录

实现方式：

绝对定位+margin: auto;

备注：

子元素需要有宽高

<div class="father_box">
  <div class="child_box"></div>
</div>
<style>
  .father_box {
    width: 200px;
    height: 200px;
    background: yellow;
    position: relative;
  }

  .child_box {
    height: 100px;
    width: 100px;
    background: red;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
</style>

transform

备注：用于不确定当前 div 的宽度和高度

实现方式：

Transform 属性应用于元素的 2D 或 3D 转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

备注：

可以用于不确定当前子元素的宽度和高度

<div class="father_box">
  <div class="child_box"></div>
</div>
<style>
  .father_box {
    width: 200px;
    height: 200px;
    background: yellow;
    position: relative;
  }

  .child_box {
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

flex 布局方式

实现方式：

flex(弹性盒模型)，详见Flex 布局教程 | 阮一峰

备注：

只需要父元素设置样式
可以用于不确定当前子元素的宽度和高度

<div class="father_box">
  <div class="child_box"></div>
</div>
<style>
  .father_box {
    width: 200px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .child_box {
    width: 100px;
    height: 100px;
    background: red;
  }
</style>

table-cell

实现方式：

table-cell可以赋予div类似于等标签的布局特性，详见display:table-cell 实现水平垂直居中
备注：
- 这在子元素不确定宽高和数量时，特别实用
- table-cell 不感知 margin，在父元素上设置 table-row 等属性，也会使其不感知 height。
```
<div class="father_box">
  <div class="child_box"></div>
</div>
<style>
  .father_box {
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  .child_box {
    width: 100px;
    height: 100px;
    background: red;
    margin: auto;
  }
</style>
```
总结

路漫漫其修远兮，与诸君共勉。

2020，诸位珍重！！！

后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

文档协议

 db 的文档库由 db 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
基于 github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

元素上下左右居中几种方式

文档协议