2.居中方式总结

居中方式总结

经典真题

  • 怎么让一个 div 水平垂直居中

盒子居中

首先题目问到了如何进行居中,那么居中肯定分 2 个方向,一个是水平方向,一个是垂直方向。

水平方向居中

水平方向居中很简单,有 2 种常见的方式:

  1. 设置盒子 margin : 0 auto :这种居中方式的原理在于设置 margin-leftauto 时,margin-left 就会被设置为能有多大就设置多大,所以盒子会跑到最右边,而设置 margin-rightauto 时,同理盒子就会跑到最左边。所以,当我们设置左右的 margin 都是 auto 的时候,盒子就跑到了中间,从而形成了水平居中。

  2. 第二种常见的方式就是通过 display : flex 设置盒子的外层盒子是一个弹性盒,然后通过 justify-content : center 使得内部的盒子居中。

垂直方向居中

关于盒子的垂直方向居中,方法就比较多了,这里介绍几种:

  1. 通过 verticle-align:middle 实现垂直居中

通过 vertical-align:middle 实现垂直居中是最常使用的方法,但是有一点需要格外注意,vertical 生效的前提是元素的 display:inline-block 。并且在使用 vertical-align:middle 的时候需要一个兄弟元素做参照物,让它垂直于兄弟元素的中心点。vertical-align 对齐的方法是寻找兄弟元素中最高的元素作为参考。

代码示例如下:

html 复制代码
<div class="container">
  <div class="item"></div>
  <div class="brotherBox"></div>
</div>
css 复制代码
.container{
  width: 500px;
  height: 300px;
  background-color: pink;
  text-align: center;
}
.item{
  width: 100px;
  height: 100px;
  background-color: skyblue;
  vertical-align: middle;
  margin: 0 auto;
  display: inline-block;
}
.brotherBox{
  height: 100%;
  /* width: 2px; */
  background: red;
  display: inline-block;
  vertical-align: middle;
}
  1. 通过伪元素 :before 实现垂直居中

平白无故添加一个无意义的参考元素不怎么好,我们可以去除作为参考的兄弟元素,转为给父元素添加一个伪元素,如下:

html 复制代码
<div class="container">
  <div class="item"></div>
</div>
css 复制代码
.container{
  width: 500px;
  height: 300px;
  background-color: pink;
  text-align: center;
}
.container::before{
  content : '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.item{
  width: 100px;
  height: 100px;
  background-color: skyblue;
  vertical-align: middle;
  margin: 0 auto;
  display: inline-block;
}
  1. 通过绝对定位实现垂直居中

这种方式需要设置父元素为相对定位,子元素为绝对定位,然后配合 margin-left 为负的盒子高度一半来实现垂直居中

html 复制代码
<div class="container">
  <div class="item"></div>
</div>
css 复制代码
.container{
  width: 500px;
  height: 300px;
  background-color: pink;
  position: relative;
}
.item{
  width: 100px;
  height: 100px;
  background-color: skyblue;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
  1. 通过 transform 实现垂直居中

可以通过定位配合 transform 也可以实现垂直居中

html 复制代码
<div class="container">
  <div class="item"></div>
</div>
css 复制代码
.container{
  width: 500px;
  height: 300px;
  background-color: pink;
  position: relative;
}
.item{
  width: 100px;
  height: 100px;
  background-color: skyblue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50px) translateY(-50px);
}
  1. 使用弹性盒子居中

通过设置父元素为弹性盒子,然后使用 justify-content: centeralign-items: center 来设置内部盒子水平垂直居中

html 复制代码
<div class="container">
  <div class="item"></div>
</div>
css 复制代码
.container{
  width: 500px;
  height: 300px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}
.item{
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

以上就是比较常见的盒子居中的解决方案,当然目前来讲最推荐的就是使用弹性盒子,这是目前最常用的一种方式,也是最推荐的一种方式。

真题解答

  • 怎么让一个 div 水平垂直居中

参考答案:

  1. 通过 verticle-align:middle 实现垂直居中
  2. 通过父元素设置伪元素 :before ,然后设置子元素 verticle-align:middle 实现垂直居中
  3. 通过绝对定位实现垂直居中
  4. 通过 transform 实现垂直居中
  5. 使用弹性盒子居中

-EOF-

相关推荐
棉花糖超人2 分钟前
【从0-1的CSS】第3篇:盒子模型与弹性布局
前端·css·html
Sally璐璐9 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06279 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台9 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121389 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
尘心cx10 小时前
前端-CSS-day1
前端·css
全宝11 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔12 小时前
STM32低功耗模式全面指南
css·stm32·css3
拾光拾趣录14 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
祝余呀14 小时前
HTML初学者第三天
前端·html