首页 > 其他分享> 文章详细

CSS 垂直居中的正确打开方式

2021-12-27 23:02:09 阅读：137 来源： 互联网

标签：居中 flex 代码 height width png image 打开方式 CSS

web-css-gaoji-jichu.jpeg

前言之爆锤面试官神器 - CSS

无论是实际开发中，亦或者是求职面试中，css 垂直居中往往都是一个绕不开的话题，其中不乏有许多面试者在多次双重尝受打击之后，而没有一个很好的反击点，刚好结合自己以前受的委屈和痛苦，来给大家一个锤爆面试官大佬们的机会。

其实垂直居中主要分为了两种类型：居中元素宽高已知 和 居中元素宽高未知，那么我们就结合这两种类型来一一做举例。

css 垂直居中.png

居中元素宽高已知

1. absolute + margin auto

顾名思义，就是利用当前元素的 position: absolute; 和 margin: auto;

注意使用此方法：父元素与当前元素的高度要设置；

通过将各个方向的距离都设置为 0，此时将 margin 设置为 auto，就可以实现垂直居中显示了；

具体代码如下：

.parent{
  position: relative;
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
}

.child{
  background: tomato;
  width: 50vw; height: 50vh;
  /* 核心代码 */
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
}

复制代码

具体效果如下：

image-20210729232149048.png

2. absolute + 负 margin

利用绝对定位百分比 50% 来实现，因为当前元素的百分比是基于相对定位（也就是父元素）来定位的;

然后再用负的 margin-top 和 margin-left 来进行简单的位移即可，因为现在的负 margin 是基于自身的高度和宽度来进行位移的。

具体代码如下：

.parent{
  position:relative;
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
}

.child{
  background: tomato;
  width: 100px; height: 100px;
  /* 核心代码 */
  position:absolute;
  top: 50%; left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

复制代码

具体效果如下：

image-20210729232317142.png

3. absolute + calc

使用 CSS3 的一个计算函数来进行计算即可；方法与上面类似

具体代码如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  position:relative;
}

.child{
  background: tomato;
  width: 200px; height: 200px;
  /* 核心代码 */
  position:absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}

复制代码

具体效果如下：

image-20210729232434257.png

居中元素宽高未知

4. absolute + transform

利用 CSS3 的新特性 transform；因为 transform 的 translate 属性值如果是一个百分比，那么这个百分比将是基于自身的宽高计算出来的。

具体代码如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  position:relative;
}

.child{
  background: tomato;
  /* 核心代码 */
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
复制代码

具体效果如下：

image-20210729232624466.png

5. line-height + vertical-align

把当前元素设置为行内元素，然后通过设置父元素的 text-align: center; 实现水平居中；

同时通过设置当前元素的 vertical-align: middle; 来实现垂直居中；

最后设置当前元素的 line-height: initial; 来继承父元素的line-height。

具体代码如下：

.parent{
  width: 90vw;
  border: 3px solid steelblue;
  /* 核心代码 */
  line-height: 500px;
  text-align: center;
}

.child{
  background: tomato;
  /* 核心代码 */
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
}
复制代码

具体效果如下：

image-20210729232748854.png

6. table 表格元素

通过最经典的 table 元素来进行水平垂直居中，不过代码看起来会很冗余，不推荐使用；

具体代码如下：

<table>
  <tbody>
    <tr>
      <td class="parent">
        <div class="child"></div>
      </td>
    </tr>
  </tbody>
</table>

<style>
  .parent {
    width: 90vw;
    height: 90vh;
    border: 3px solid steelblue;
    /* 核心代码 */
    text-align: center;
  }
  .child {
    background: tomato;
    /* 核心代码 */
    display: inline-block;
  }
</style>
复制代码

具体效果如下：

image-20210729233002861.png

7. css-table 表格样式

如果一定要使用 table 的特性，但是不想写 table 元素的话，那么css-table 就很适合你；

具体代码如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.child{
  background: tomato;
  /* 核心代码 */
  display: inline-block;
}
复制代码

具体效果如下：

image-20210729233055305.png

8. flex 布局（一）

要说现在较为流行和使用较多的布局方案，那么非 flex 莫属了，那么举例两个最常见的使用方式 ~

直接在 flex-container 上通过几行代码即可很优雅的实现

具体代码如下：

.parent {
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  
  /* 核心代码 */
  display: flex;
  justify-content: center;
 align-items: center;
}
.child{
  background: tomato;
}
复制代码

justify-content 表示：设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；

align-items 表示：定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。

具体效果如下：

image-20210729233155581.png

9. flex + margin auto（二）

在 flex-item 上更加优雅的实现

具体代码如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  
  /* 核心代码 */
  display: flex;
}

.child{
  background: tomato;
  
  /* 核心代码 */
  margin: auto;
}
复制代码

具体效果如下：

image-20210729233243684.png

flex 的两种方法使用取舍，任凭您意

附赠 flex 兼容性图片一张

image-20210725020146492.png

10. grid 网格布局 (一)

grid 布局相信大家在实际项目中用的较少，主要是该布局实在是太超前，导致了兼容性不是那么理想，但是不可否认的是 grid 的能力在 css 布局中绝对是一个质的飞越。

不熟悉的可以看下阮一峰老师的详细入门教程[1]

CSS Grid 包含与 Flexbox 几乎相同的对齐选项，因此我们可以在 grid-container 上优雅的实现

具体代码如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  display: grid;
  align-items: center;
  justify-content: center;
}

.child{
  background: tomato;  
}
复制代码

具体效果如下：

image-20210729233416689.png

11. grid 网格布局 (二)

同样我们可以像 Flexbox 一样，在 grid-item 上优雅的实现

具体代码如下：

.parent{
  width: 90vw;
  height: 90vh;
  border: 3px solid steelblue;
  /* 核心代码 */
  display: grid
}

.child{
  background: tomato;
  /* 核心代码 */
  align-self: center;
  justify-self: center;
}
复制代码

具体效果如下：

image-20210729233458535.png

flex 的两种方法使用取舍，任凭您高兴

附赠 grid 兼容性图片一张

image-20210725020025034.png

总结

在学习了上面的 11 种垂直居中布局方法后，我们简单概括一下

如果你的项目在 PC 端有兼容性要求并且宽高固定，推荐使用 absolute + 负 margin 方法实现；
如果你的项目在 PC 端有兼容性要求并且宽高不固定，推荐使用 css-table 方式实现；
如果你的项目在 PC 端无兼容性要求 ，推荐使用 flex 实现居中，当然不考虑 IE 的话，grid 也是个不错的选择；
如果你的项目在移动端使用 ，那么推荐你使用 flex ，grid 也可作为备选。

关于本文

作者：易师傅

https://juejin.cn/post/6991465721565806605

往期推荐

[

引入阿里iconfont图标方法以及注意事项

](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247490591&idx=1&sn=1a54d7c343daf24bb8d39ccabd854f1e&chksm=ebb6ff7cdcc1766a10751a69169db2df6c10f18d624922250ae159557968c202a2ab12944e19&scene=21#wechat_redirect)

[

推荐几个在线观看资源的网站，且行且珍惜！！

](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247490165&idx=1&sn=f20721a767c605afa3a2bcfd892782a0&chksm=ebb6f916dcc17000eeecf13ac21b2d3c3588b68b3c67adbfd9e5f25fb19baf7e59492add2569&scene=21#wechat_redirect)

[

利用Vue 脚手架开发chrome 插件，太方便了！

](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247489922&idx=1&sn=8780d1e199b976221b9c24b277b1b40d&chksm=ebb6fae1dcc173f7056290f29d05eb85965cf1b5862723bcd67c13e74c48e37f6056e605c3e2&scene=21#wechat_redirect)

[

Vue类似hooks的新库VueUse

](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247489069&idx=1&sn=af43067b5275786f47ca93a522a41626&chksm=ebb6f54edcc17c58440a6a6c8865ffd7de3269dc29db0f1ef95b5fc77d731293b46fccc732c0&scene=21#wechat_redirect)

[

nvm安装与使用

](http://mp.weixin.qq.com/s?__biz=MzI4MDQ5MTUzMg==&mid=2247487379&idx=1&sn=fb06b04c517731e2ec2b2baa43635a9f&chksm=ebb6ecf0dcc165e6ef1c9b889a3f42ede75c84f9c3b8359d9e39587aed6c1534f7119631e316&scene=21#wechat_redirect)

标签：居中,flex,代码,height,width,png,image,打开方式,CSS
来源： https://blog.csdn.net/tuoni123/article/details/122182306

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS 垂直居中的正确打开方式

前言之爆锤面试官神器 - CSS

居中元素宽高已知

1. absolute + margin auto

具体代码如下：

具体效果如下：

2. absolute + 负 margin

具体代码如下：

具体效果如下：

3. absolute + calc

具体代码如下：

具体效果如下：

居中元素宽高未知

4. absolute + transform

具体代码如下：

具体效果如下：

5. line-height + vertical-align

具体代码如下：

具体效果如下：

6. table 表格元素

具体代码如下：

具体效果如下：

7. css-table 表格样式

具体代码如下：

具体效果如下：

8. flex 布局（一）

具体代码如下：

具体效果如下：

9. flex + margin auto（二）

具体代码如下：

具体效果如下：

附赠 flex 兼容性图片一张

10. grid 网格布局 (一)

具体代码如下：

具体效果如下：

11. grid 网格布局 (二)

具体代码如下：

具体效果如下：

附赠 grid 兼容性图片一张

总结

作者：易师傅