AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

这一次，彻底搞懂垂直水平居中

2021-11-17 152
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这一次，彻底搞懂垂直水平居中

这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

无论是在面试中还是在工作中，将一个元素置为水平或垂直居中，都是一个前端工程师必备的基本功，接下来让我们一起来对居中这个话题进行系统性的梳理和总结。

一、水平居中

行内元素

HTML结构

<div class="parent">
    <span class="child">111</span>
  </div>
复制代码

居中方法：给其父元素设置text-align: center;

text-align: center;
复制代码

块级元素

一般块元素

只需给该元素设置margin: 0 auto即可。

margin: 0 auto;
复制代码

子元素包含float的情况

可以给父元素设置宽度为：fit-content。

.parent {
    margin: 0 auto;
    width: fit-content;
}
.child {
    float: left
}
复制代码

flex布局实现水平居中

通过给父元素设置下面两个属性：

display: flex;
justify-content: center;
复制代码

绝对定位 + left + transform

给子元素设置下面的css样式。（注意：下面的translate是相对于自身进行移动的）

position: absolute;
left: 50%;
transform: translate(-50%,0);
复制代码

绝对定位 + left + margin-left

给子元素设置下面的CSS样式。

position: absolute;
left: 50%;
margin-left: calc(-0.5*100px);
复制代码

绝对定位 + left/right + margin

给父元素设置下面的CSS样式。

position: absolute;
left: 0;
right: 0;
margin: 0 auto;
复制代码

二、垂直居中

行内元素

单行文本

给子元素的行高设置为父元素的高度即可。

.parent {
  width: 200px;
  height: 200px;
  text-align: center;
  border: 1px solid red;
  margin: 0 auto;
}
.child {
  line-height: 200px;
  background-color: pink;
}
复制代码

将行高和高度均设置在父元素身上也是可行的。

.parent {
  width: 200px;
  height: 200px;
  line-height: 200px;
  border: 1px solid red;
}
复制代码

块级元素

行内块元素

可以给行内块元素，添加一个兄弟元素，将这个兄弟元素的高度设置和父元素高度一致，字体大小设置为0.

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
.child,.brother {
  display: inline-block;;
  vertical-align: middle;
}
.child {
  background: blue;
  font-size: 12px;
}
.brother {
  height: 400px;
  font-size: 0;
}
复制代码
<div class="parent">
    <div class="child">child</div>
    <div class="brother">brother</div>
  </div>
复制代码

flex布局

只需给父元素设置display:flex和align-items: center即可。

display: flex;
align-items: center;
复制代码

绝对定位 + left/top/right/bottom + margin: auto

子级绝对定位，父级相对定位，同时给自己的四个定位边置为0，然后设置为，margin: auto即可。

.parent {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  margin: auto;
  background: blue;
  font-size: 12px;
}
复制代码

table-cell + vertical-align

这种垂直居中方法只需给父元素设置display: table-cell,同时设置vertical-align：middle即可。

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  display: table-cell;
  vertical-align: middle;
}
.child {
  width: 200px;
  height: 100px;
  background: blue;
}
复制代码

子绝对父相对 + margin偏移

这种定位，首先需要子绝父相，然后通过margin进行偏移，缺点是需要知道宽高才可以。

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
}
.child {
  width: 200px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}
复制代码

自绝对父相对 + transform

子元素设置绝对定位，父元素设置相对定位，然后通过transform进行平移偏移量。

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  position: relative;
}
.child {
  width: 200px;
  height: 100px;
  background: blue;
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}
复制代码

借助伪元素

给父元素内部设置before伪元素，这个伪元素的高度设置为100%，内容设置为空，并设置为行内块元素，然后设置行内垂直对齐。子元素也要设置为行内块元素，行内垂直对齐。

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid red;
  text-align: center;
}
.child {
  width: 200px;
  height: 100px;
  background: blue;
  display: inline-block;
  vertical-align: middle;
}
.parent::before {
  height: 100%;
  content: '';
  display: inline-block;
  vertical-align: middle;
}
复制代码

三、垂直水平居中

不定宽高

注意：这里的不定宽高指的是子元素的宽高不知道，并不是父元素的不知道。

方式1：绝对定位 +  transform

  • HTML结构
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • CSS样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
    .child {
      position: absolute;
      background: yellow;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
    }
  </style>
复制代码

方式2：table-cell布局

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .child {
      background: yellow;
      display: inline-block;
    }
  </style>
复制代码

方式3：flex布局

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .child {
      background: yellow;
    }
  </style>
复制代码

方式4：flex + margin:auto

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
    }
    .child {
      margin: auto;
      background: yellow;
    }
  </style>
复制代码

方式5：grid布局 + flex布局

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: grid;
    }
    .child {
      background: yellow;
      align-self: center;
      justify-self: center;
    }
  </style>
复制代码

方式6：grid布局 + margin: auto

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: grid;
    }
    .child {
      background: yellow;
      margin: auto
    }
  </style>
复制代码

定宽高

注意：这里的定宽高指的是子元素的宽高是已知的。

方式1：绝对定位 + 负margin值

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • CSS样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
    .child {
      background: yellow;
      position: absolute;
      width: 100px;
      height: 100px;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }
  </style>
复制代码

方式2：绝对定位 + transform (定宽/不定宽 通用)

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • CSS样式
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  position: relative;
}
.child {
  background: yellow;
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
复制代码

方式3：绝对定位 + left/top/right/bottom + margin: auto

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • css样式
<style>
    .parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      position: relative;
    }
    .child {
      background: yellow;
      position: absolute;
      width: 100px;
      height: 100px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
复制代码

方式4：flex布局（定宽高和不定宽高：通用）

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • CSS样式
.parent {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .child {
      background: yellow;
      width: 100px;
      height: 100px;
    }
复制代码

方式5：grid布局 + margin: auto（通用）

  • HTML样式
<div class="parent">
   <div class="child">child</div>
</div>
复制代码
  • CSS样式
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: grid;
}
.child {
  background: yellow;
  width: 100px;
  height: 100px;
  margin: auto;
}
复制代码

方式6：table-cell布局（通用）

  • HTML样式
<div class="parent">
    <div class="child">child</div>
  </div>
复制代码
  • CSS样式
.parent {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.child {
  background: yellow;
  width: 100px;
  height: 100px;
  display: inline-block;
}
复制代码

四、图片居中的方法

关于图片的垂直水平居中，可以参考上文提到的几种通用垂直水平居中的方法，原理是一样的。

  • 绝对定位 + transform
  • flex布局
  • grid布局 + margin: auto
  • table-cell布局

五、自适应垂直水平居中

  • 方式1：绝对定位 + left/top/right/bottom + margin: auto
  • 方式2：绝对定位 + transform
  • 方式3：flex布局
文章标签：
前端开发
答案命运
目录
相关文章
土木林森
|
4月前
|
前端开发 JavaScript 开发者
告别居中难题！揭秘未知宽高元素如何轻松实现水平和垂直居中的神奇技巧！
【8月更文挑战第23天】本文介绍了在Web前端开发中实现未知宽度和高度元素的水平垂直居中的四种方法：使用Flexbox布局、Grid布局、绝对定位结合transform属性以及利用负margin。每种方法均提供了示例代码，帮助开发者根据不同场景和兼容性需求选择最合适的解决方案，从而轻松应对各种居中布局需求。
土木林森
39 1
晓同哇哇~
|
7月前
|
前端开发 定位技术
让一个父元素中的子元素垂直水平居中的方法
让一个父元素中的子元素垂直水平居中的方法
晓同哇哇~
52 1
米果粒
|
7月前
背景图像 - 水平或垂直平铺
背景图像 - 水平或垂直平铺。
米果粒
58 2
啊理八八
|
前端开发 容器
面试官：居中对齐有哪些实现方式？
面试官：居中对齐有哪些实现方式？
啊理八八
68 0
空洞啊
水平居中 #31
水平居中 #31
空洞啊
58 0
柳鲲鹏
|
C#
C#中，让按钮文字垂直水平都居中
C#中，让按钮文字垂直水平都居中
柳鲲鹏
162 0
hxyzvw3onrkfg
|
前端开发
认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法（1）
网页是一个多层的结构,设置样式样式，也是一层一层的设置，最终我们看到的最上面的一层。
hxyzvw3onrkfg
133 0
认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法（1）
hxyzvw3onrkfg
认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法（2）
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,盒子的大小由内容区、内边距和边框共同决定。外边距指的是当前盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响到盒子的位置。
hxyzvw3onrkfg
215 0
认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法（2）
hxyzvw3onrkfg
认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法（3，此节不全）
通过本章认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法。
hxyzvw3onrkfg
98 0
hxyzvw3onrkfg
|
前端开发
认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法（4）
通过本章认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法
hxyzvw3onrkfg
148 0

热门文章

最新文章

  • 1
    Hive之数据倾斜的原因和解决方法
  • 2
    【Java】留下没有基础眼泪的面试题
  • 3
    四大触点，教你从“用户视角”构建数据分析体系
  • 4
    CentOS7 yum的一次报错" 14: curl#56 - "Recv failure: Connection reset by peer" "
  • 5
    [软件工程导论(第六版)]第5章 总体设计（课后习题详解）
  • 6
    同步、异步、阻塞、非阻塞
  • 7
    ArcEngine控制台应用程序
  • 8
    perl学习笔记(10)
  • 9
    新疆电信新疆联通签网络合作协议
  • 10
    epoll是如何监控多个描述符及如何获得通知(2)
  • 1
    《C++数据降维之道：PCA 与 t - SNE 助力信息留存》
    38
  • 2
    「Mac畅玩鸿蒙与硬件44」UI互动应用篇21 - 随机励志语录生成器
    52
  • 3
    《C++赋能智能摄像头：开启实时视频分析新纪元》
    41
  • 4
    MV-Adapter：上交大、北航和 VAST 等联合开源多视图一致图像生成模型，将预训练的文生图扩散模型转为多视图生成器
    47
  • 5
    《C++与 BLAS、LAPACK：加速人工智能算法的线性代数秘籍》
    42
  • 6
    Manga Image Translator：开源的漫画文字翻译工具，支持多语言翻译并嵌入原图，保持漫画的原始风格和布局
    33
  • 7
    NodeTool：AI 工作流可视化构建器，通过拖放节点设计复杂的工作流，集成 OpenAI 等多个平台
    34
  • 8
    《C++与 Armadillo：线性代数助力人工智能算法简化之路》
    24
  • 9
    ColorFlow：腾讯和清华大学联合推出的图像序列着色模型，通过参考图像的颜色对黑白漫画进行着色生成彩色漫画
    34
  • 10
    《C++与 ONNX：构建跨平台推理引擎的智慧融合》
    22

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云oss存储简介和如何使用