CSS 快速实现水平垂直居中

news2024/11/17 1:56:59

CSS 快速实现水平垂直居中.png

CSS 快速实现水平垂直居中

文章目录

CSS 快速实现水平垂直居中
- 一、前言
- 二、弹性布局普遍做法
- 三、弹性布局的妙用
- 参考资料💘
- 推荐博文🍗

一、前言

本文探究的是如何快速实现水平垂直居中，重点在于快速两个字，我对于快速的理解，一是不需要编写大量的 CSS 属性，二是不需要手动计算居中的具体位置数值，基于这两个前提下，使用像 line-height 和定位布局这种方式是不被允许的，那还剩下什么选择呢？答案就是使用弹性布局。

二、弹性布局普遍做法

对于有前端基础的朋友来讲，这个方法实在是太普遍了，无非就是基于 justify-content 和 align-self 属性实现的，也没啥内容好提的。

<div class="flex-wrap">
  <div class="flex-content"></div>
</div>

<style>
	.flex-wrap {
      /* 核心内容 */
      display: flex;
      justify-content: center;
      align-items: center;
      /* 无关紧要的 */
      width: 100vw;
      height: 100vh;
    }
    .flex-content {
      /* 无关紧要的 */
      width: 100px;
      height: 100px;
      background-color: orange;
    }
</style>

图 2-1

三、弹性布局的妙用

如果只是讲大多数人都会使用的弹性布局居中属性，那也太没意思了，在此讲解一个大多数都不知道的方法，相较于普通做法而言，只需要两个CSS属性即可实现。
该实现基于 FFC(Flex Formatting Contexts)、GFC(GridLayout Formatting Contexts) 上下文布局。
在WSC规范文档中弹性盒子部分，有这么一句描述：Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension，翻译一下的意思是：任何正的剩余空间将会在 justify-content 和 align-self 属性之前被分配到该维度的自动边距中，这意味这 margin: auto 属性不仅仅作用于水平方向，甚至可以作用于垂直方向上！
图 3-1

  <div class="flex-wrap">
    <div class="flex-content"></div>
  </div>

<style>
  .flex-wrap {
    /* 核心内容 */
    display: flex;
    /* 无关紧要的 */
    width: 100vw;
    height: 100vh;
  }
  .flex-content {
    /* 核心内容 */
    margin: auto;
    /* 无关紧要的 */
    width: 100px;
    height: 100px;
    background-color: pink;
  }
</style>

图 3-2

看着很牛很方便，但是在使用得当的前提下进行，此方法还是有一定的缺陷，但影响很小：

使用此方法的前提是，需要明确是否为父子元素布局，父元素与子元素都要各自设置一个属性，对于非固定的子元素，我的建议是还是在父元素上使用传统的justify-content 和 align-self 属性。
值得一提的是，margin: auto 是在justify-content 和 align-self 属性之前实现的，既然剩余空间都被分配完了，无可避免会造成这两个属性的失效，那目标就很明确了，确定只是水平垂直方向居中的话，从这两个方法中选一个，两者不能同时存在。