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

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

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

这是我参与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布局
文章标签：
前端开发
答案命运
目录
相关文章
土木林森
|
3月前
|
前端开发 JavaScript 开发者
告别居中难题！揭秘未知宽高元素如何轻松实现水平和垂直居中的神奇技巧！
【8月更文挑战第23天】本文介绍了在Web前端开发中实现未知宽度和高度元素的水平垂直居中的四种方法：使用Flexbox布局、Grid布局、绝对定位结合transform属性以及利用负margin。每种方法均提供了示例代码，帮助开发者根据不同场景和兼容性需求选择最合适的解决方案，从而轻松应对各种居中布局需求。
土木林森
36 1
Goodluck-dys
|
6月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
Goodluck-dys
58 1
米果粒
|
6月前
背景图像 - 水平或垂直平铺
背景图像 - 水平或垂直平铺。
米果粒
55 2
空洞啊
水平居中 #31
水平居中 #31
空洞啊
56 0
柳鲲鹏
|
C#
C#中，让按钮文字垂直水平都居中
C#中，让按钮文字垂直水平都居中
柳鲲鹏
153 0
张起灵-小哥
|
前端开发 容器
web前端学习（二十五）——CSS3布局（水平 & 垂直对齐）的相关设置
web前端学习（二十五）——CSS3布局（水平 & 垂直对齐）的相关设置
张起灵-小哥
202 0
web前端学习（二十五）——CSS3布局（水平 & 垂直对齐）的相关设置
hxyzvw3onrkfg
认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法（3，此节不全）
通过本章认识盒子模型，盒子模型的边框、内外边距、水平布局、垂直布局、设置浮动、处理高度塌陷的基本方法。
hxyzvw3onrkfg
95 0
草帽lufei
|
前端开发 容器
div水平布局两边对齐
父容器div使用 position: relative;,子div使用 position:absolute;定位，注意边距问题。
草帽lufei
181 0
div水平布局两边对齐
前端歌谣
html+css实战155-位移-居中
html+css实战155-位移-居中
前端歌谣
98 0
MartinAgerAdams
|
前端开发 容器
CSS布局之水平居中布局
水平居中布局指的是当前元素在父级元素容器中，水平方向是居中显示的。
MartinAgerAdams
487 0