4. 如何实现一个元素的水平垂直居中

4. 如何实现一个元素的水平垂直居中

4.1 更多描述

要求对行内元素、块状元素及不定宽高的块状元素均可适用：

以下是布局代码

<div class="container">
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    块状元素
  </div>
</div>

<div class="container">
  <div class="item">不定高宽的块状元素</div>
</div>

<div class="container">
  <span class="item">行内元素</span>
</div>
.container {
   // 把代码写在这里
}

.container {
  height: 20rem;
  background: #ccc;
  margin: 1rem;
}

4.2 解答

提供一些现代浏览器下使用 flex/grid 的方法，不仅支持块状元素，而且支持行内元素，对固定高宽与不固定高宽皆可使用。

使用 flex，以下是经典的垂直居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用 grid，它是做二维布局的，但是只有一个子元素时，一维布局与二维布局就一样了。

结合 justify-content/justify-items 和 align-content/align-items 就有四种方案

效果可以见 codepen(opens new window)

.container {
  display: grid;
  justify-content: center;
  align-content: center;
}
.container {
  display: grid;
  justify-content: center;
  align-items: center;
}
.container {
  display: grid;
  justify-items: center;
  align-content: center;
}
.container {
  display: grid;
  justify-items: center;
  align-items: center;
}

三个属性略显啰嗦，其实只需两个属性即可:

.container {
  display: grid;
  place-items: center;
}
.container {
  display: grid;
  place-content: center;
}

4.3 补充

4.3.1 display

display 属性可以设置元素的内部和外部显示类型 display types。元素的外部显示类型 outer display types 将决定该元素在流式布局中的表现（块级或内联元素）；元素的内部显示类型 inner display types 可以控制其子元素的布局（例如：flow layout，grid 或 flex）。

在 CSS 规范（特指 CSS Level 1/2/3 规范）中查阅 display 属性的所有取值时需要注意：个别取值的详细信息记录在独立的规范中。 例如，display: flex 的详细信息在 CSS Flexible Box Model 规范中记录。可以在本文档末尾的表格中查看所有有关的规范。

4.3.2 CSS 弹性盒子布局display: flex

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

将容器设置为 display: flex ，这意味着三个子项成为弹性项。

4.3.3 对齐属性

（1）align-content

CSS 的 align-content 属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

/* 基本位置对齐 */
/*align-content不采用左右值 */
align-content: center;     /* 将项目放置在中点 */
align-content: start;      /* 最先放置项目 */
align-content: end;        /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置flex元素 */
align-content: flex-end;   /* 从终止点开始放置flex元素 */

/* 默认对齐 */
align-content: normal;

/*基线对齐*/
align-content: baseline;
align-content: first baseline;
align-content: last baseline;

/* 分布式对齐 */
align-content: space-between; /* 均匀分布项目
                                 第一项与起始点齐平，
                                 最后一项与终止点齐平 */
align-content: space-around;  /* 均匀分布项目
                                 项目在两端有一半大小的空间*/
align-content: space-evenly;  /* 均匀分布项目
                                 项目周围有相等的空间 */
align-content: stretch;       /* 均匀分布项目
                                 拉伸‘自动’-大小的项目以充满容器 */

/* 溢出对齐 */
align-content: safe center;
align-content: unsafe center;

/* 全局属性 */
align-content: inherit; /* 继承 */
align-content: initial;  /* 初始值 */
align-content: unset; /* 未设置 */

（2）align-items

CSS align-items属性将所有直接子节点上的align-self值设置为一个组。 align-self属性设置项目在其包含块中在交叉轴方向上的对齐方式。

align-items: stretch; //弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
align-items: center; /* Pack items around the center */
align-items: start; /* 元素向侧轴起点对齐 */
align-items: end; /* 元素向侧轴终点对齐。 */

（3）align-self

CSS 属性 align-self 会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。In Grid, it aligns the item inside the grid area. 在 Flexbox 中，会按照 cross axis（当前 flex 元素排列方向的垂直方向）进行排列。

align-self属性不适用于块类型的盒模型和表格单元。如果任何 flexbox 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。

align-items: stretch; /* Stretch 'auto'-sized items to fit the container */
align-self: center; /* Put the item around the center */
align-self: start;  /* Put the item at the start */
align-self: end;    /* Put the item at the end */

（4）justify-content

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

**提示：**使用 align-content 属性对齐交叉轴上的各项（垂直）。

值	描述	测试
flex-start	默认值。项目位于容器的开头。	测试 »
flex-end	项目位于容器的结尾。	测试 »
center	项目位于容器的中心。	测试 »
space-between	项目位于各行之间留有空白的容器内。	测试 »
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	测试 »
initial	设置该属性为它的默认值。请参阅 initial。	测试 »
inherit	从父元素继承该属性。请参阅 inherit。

（5）place-items

CSS 中的 place-items 是一个简写属性 ，它允许你在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 (例如：align-items 和 justify-items 属性) 。如果未提供第二个值，则第一个值作为第二个值的默认值。

/* Keyword values */
place-items: auto center;
place-items: normal start;

（6）place-content

place-content 属性是align-content 和 justify-content的简写. 使用这两个属性的值可以用于任何的布局情况。

第一个值为 align-content 属性, 第二个值为 justify-content .

非常重要:如果没有设置第二个值, 那么第二个的值与第一个相等, 此前提是第一个值对两个属性都是有效的。如果设置的这个值对两个属性都无效，那么整个设置的值就是无效的。