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

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

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

这是我参与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月前
|
前端开发 定位技术
让一个父元素中的子元素垂直水平居中的方法
让一个父元素中的子元素垂直水平居中的方法
晓同哇哇~
56 1
米果粒
|
7月前
背景图像 - 水平或垂直平铺
背景图像 - 水平或垂直平铺。
米果粒
61 2
啊理八八
|
前端开发 容器
面试官：居中对齐有哪些实现方式？
面试官：居中对齐有哪些实现方式？
啊理八八
69 0
空洞啊
水平居中 #31
水平居中 #31
空洞啊
58 0
柳鲲鹏
|
C#
C#中，让按钮文字垂直水平都居中
C#中，让按钮文字垂直水平都居中
柳鲲鹏
163 0
hxyzvw3onrkfg
认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法（3，此节不全）
通过本章认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法。
hxyzvw3onrkfg
99 0
草帽lufei
|
前端开发 容器
div水平布局两边对齐
父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题。
草帽lufei
191 0
div水平布局两边对齐
前端歌谣
html+css实战154-位移-居中
html+css实战154-位移-居中
前端歌谣
149 0
前端歌谣
html+css实战155-位移-居中
html+css实战155-位移-居中
前端歌谣
105 0

热门文章

最新文章

  • 1
    docker容器里安装ssh
  • 2
    优秀的代码都是如何分层的？
  • 3
    RDS入门——Excel文件转存到RDS数据库实践
  • 4
    3、Python与设计模式--建造者模式
  • 5
    PostgreSQL SQL HINT的使用
  • 6
    跟阿里云技术专家阙寒一起深度了解视频直播CDN技术
  • 7
    AjaxFileUploader上传插件 兼容性好
  • 8
    （转载） 数组a[]={3,5,2,4,1,8}，要求从a中找出所有“和”等于10的子集
  • 9
    SAP WM Movement Type Mail Control for Background processing
  • 10
    Ext 4 概述（七）之面板Panel &amp; 杂项
  • 1
    自学记录HarmonyOS Next DRM API 13：构建安全的数字内容保护系统
    43
  • 2
    《MaxFrame：数据处理的卓越实践与提升》
    58
  • 3
    《DataWorks：数据处理的卓越实践与改进思考》
    51
  • 4
    三维球体空间中光线反射模拟与三维点云提取matlab仿真
    50
  • 5
    《多模态数据信息提取解决方案的体验与部署》
    48
  • 6
    基于PSO优化的PV光伏发电系统simulink建模与仿真
    57
  • 7
    数据链中常见电磁干扰matlab仿真,对比噪声调频,线性调频,噪声,扫频,灵巧五种干扰模型
    51
  • 8
    《破局之路：人工智能产业的健康发展》
    40
  • 9
    《强化学习算法在动态环境中的优化之路》
    44
  • 10
    《大模型训练成本高，如何在不牺牲性能的前提下破局》
    43

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)