网页布局：Flexbox中的水平和垂直居中

在Flexbox布局模块中，无论是单行还是多行，都可以很容易地在容器中水平和垂直居中，而且方法有很多种。最常见的是在 Flex 容器上设置对齐方式，在 Flex 元素上设置 margin:auto。

首先让我们看看在 Flex 容器上设置调整。

设置Flex容器和Flex元素上的对齐方式

你可能已经知道，当justify-content和align元素的值设置为Flex容器上居中时，元素可以水平和垂直居中在 Flex 中 - 容器。 。我们看一个例子：

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>

/* CSS */
.flex__container {
    display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

效果如下：

Demo(codepen.io/airen/embed...)

这种方法特别适合图标icon在容器中水平和垂直居中的情况。不同之处在于图标集在容器上显示：inline-flex。例如下面的例子：

<!-- HTML -->
<div class="flex__container">
    <svg> </svg>
</div>

/* CSS */
.flex__container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
复制代码

效果如下：

Demo(codepen.io/airen/embed...)

在此模式下，如果要实现水平和垂直居中的效果多个元素，也可以 必须添加 flex-direction: column，例如：

<!-- HTML -->
<div class="flex__container">
    <div class="avatar">:)</div>
    <div class="media__heading"></div>
    <div class="media__content"></div>
    <div class="action"></div>
</div>

/* CSS */
.flex__container  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
复制代码

效果如下：

Demo(codepen.io/airen/embed...)

在 Flexbox 布局中，你还可以在Flex容器中添加如下的Flex项目来实现水平和垂直居中的效果：

<!-- HTML -->
<div class="flex__container">
    <div class="flex__item"></div>
</div>

/* CSS */
.flex__container {
    display: flex; // 或inline-flex
    justify-content: center;
}

.flex__item {
    align-self: center;
}
复制代码

效果如下：

Demo(codepen.io/airen/embed...)

如果有Flex容器中有多个Flex-项目，这个方法也是有效的：

.flex__container {
    display: flex; // 或inline-flex
    justify-content: center;
}

.flex__container > * {
    align-self: center;
}
复制代码

比如下面的效果：

Demo(codepen.io/airen/embed...)

另外，你还可以使用place内容：将Flex项目水平和垂直居中：

.flex__container {
    display: flex;
    place-content: center;
}

.flex__item {
    align-self: center;
}

复制代码

效果如下：

Demo(codepen.io/airen/embed...)

或更改：

.flex__container {
    display: flex;
    place-content: center;
    place-items: center;
}
复制代码

效果如下：

Demo(codepen .io/airen/embed...)

这两种方法也可以用于Flex容器中有多个Flex项目的场景：

.flex__container {
    display: flex;
    flex-direction: column;
    place-content: center;
}

.flex__container > * {
    align-self: center;
}

// 或

.flex__container {
    display: flex;
    flex-direction: column;
    place-content: center;
    place-items: center;
}

复制代码

效果如下：

Demo (codepen.io/airen/ embed...)

很多同学可能对地点内容和地点元素比较陌生。事实上，place-content是align-content和justify-content的简写属性； place-items 是align-items 和justify-items 的简写属性。即：

.flex__container {
    place-content: center;
    place-items: center;
}
复制代码

等于：

.flex__container {
    align-content: center;
    justify-content: center;

    align-items: center;
    justify-items: center;
}
复制代码

虽然扩展为具有四个属性，但它最终等于：

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

// 多行
.flex__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
复制代码

设置 margin: auto 如果 仅位于 Flex 容器中的 Flex 项目上 对于 Flex 项目，还可以在Flex项目中显式地将margin值设置为auto，这样Flex项目就可以在Flex容器中水平和垂直居中。例如：

.flex__container {
    display: flex; // 或 inline-flex
}

.flex__item {
    margin: auto;
}
复制代码

效果如下：

Demo(codepen.io/airen/embed...)

您可以通过以下示例体验整个过程。尝试选择不同方向的边距值：

Demo(codepen.io/airen/embed…

作者：阿里巴巴淘宝科技
链接：https://juejin.im/post/686510786483690787481来源：掘金
版权归作者所有，商业转载请联系作者授权。非商业转载请注明出处。