乐趣区

关于css3:CSS水平垂直居中布局方案概述述

jiezi

在前端开发中，通过 CSS 实现布局容器的居中，也有诸多办法形式，当然也是 CSS 面试题中的经典面试题，在本文章中会零碎的剖析综述 通过 Flexbox 布局模块 与 CSS Grid 布局模 实现容器的居中成果。

在传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性来实现根本布局，包含本文章的居中排列。

** 你可能须要
CSDN 网易云课堂教程
掘金 EDU 学院教程
知乎 Flutter 系列文章

本文章首发于微信公众号（biglead）我的大前端生涯，同步登载各技术论坛。

1 Flexbox 中实现程度垂直居中

1.1 Flexible Box 的简述

在 2009 年，W3C 提出出的 Flex 布局计划，Flex 是 Flexible Box 的缩写，可意为”弹性布局”，任何一个容器都能够指定为 Flex 布局，可用来为盒状模型提供最大的灵活性。

采纳 Flex 布局的元素，称为 Flex 容器（flex container），以下称为 Flexbox，Flex 容器中的所有子元素称为 Flex 我的项目（flex item）。

任何一个容器都能够指定为 Flex 布局，如下所示：

.box{display: flex;}

或者是 

.box{display: inline-flex;}

可点击这里查看 CSS 中 flex 和 inline-flex 的区别

Flexbox 默认存在两根轴：程度的主轴（main axis）和垂直的穿插轴（cross axis）。主轴的开始地位（与边框的交叉点）叫做 main start，完结地位叫做 main end；穿插轴的开始地位叫做 cross start，完结地位叫做 cross end，如下图所示：

1.2 Flexible Box 中子 Item 的居中对齐

在 Flexbox 布局模块中，使其子 Item (flex item) 居中对齐（程度方向与竖直方向全副居中），如下图 1-1 所示成果：

1.2.1 实现形式一 只设置 Flex 容器的属性

如图 1-1 中所示的成果，只须要在 Flex 容器上设置 justify-content、align-items 的值为 center 时，能够让元素在 Flex 容器中达到程度垂直居中的成果，如下代码清单 1 - 2 所示：

/* 代码清单 1 -2*/
<div class="flex__container">
  <div class="flex__item"></div>
</div>
    /*Flex 容器 */
    .flex__container {
      display: flex;
      justify-content: center;
      align-items: center;

      width: 300px;
      height: 300px;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 100px;
      height: 100px;
      background-color: aqua;
    }

justify-content 用来设置程度居中，如下图 1 - 3 所示：

align-items 用来限度竖直居中，如下图 1 - 4 所示：

如下图 1 - 2 中所示，将 Flex 容器中的子 Item 减少为 4 个，此种办法设置的居中成果仍然有成果。

图 1-2 中对应的 代码如下：

/* 代码清单 1 -3*/
<div class="flex__container">
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  <div class="flex__item"></div>
</div>

    /*Flex 容器 */
    .flex__container {
      display: flex;
      justify-content: center;
      align-items: center;

      /*flex-direction: column;*/
      /*display: inline-flex;*/

      width: 300px;
      height: 300px;
      background-color: gray;
    }

    /*Flex 子 Item */
    .flex__item {
      width: 50px;
      height: 50px;
      margin-left: 10px;
      margin-top: 10px;
      background-color: aqua;
    }
1.2.2 实现形式 二 同时设置 Flex 容器属性与其子 Item 的属性 
    /*Flex 容器 */
    .flex__container {
      display: flex;
      justify-content: center;
    }

    /*Flex 子 Item */
    .flex__item {align-self: center;}

对应的 Html 层级代码如下：


<div class="flex__container">
  
  <div class="flex__item"></div>
  <div class="flex__item"></div>
  
</div>
1.2.3 Flex 容器中子 Item 设置 margin: auto

如果在 Flex 容器中只有一个 子 Item，能够在 Item 中显式的设置 margin 的值为 auto，也能够实现程度垂直居中成果，如下图 1 - 5 所示：

2 Grid 布局中实现程度垂直居中

Css 中的 Grid 布局可称为 CSS Grid Layout Module，是 CSS 为布局新增的一个模块，简略的了解为 Grid 布局，是一个网络布局，任何一个容器都能够指定为 Grid 布局，如下所示：

.box{
 /* 或者 inline-grid */
  display: grid;
}

在 Grid 布局中，实现其子 Item 的垂直程度居中成果可间接 配置 place-items 为 center，如下图 1- 6 所示：

    /*Grid 容器 */
    .flex__container {
      /* 或者 inline-grid */
      display: grid;
      place-items: center;
    }

结束

退出移动版