网页布局:Flexbox中实现水平垂直居中

2020年9月13日11:51:25 发表评论 145 views

Flexbox布局模块中,不管是单行还是多行,要让它们在容器中水平垂直居中都是件易事,而且方法也有多种。最常见的是在Flex容器上设置对齐方式,在Flex项目上设置margin:auto。

先来看在Flex容器上设置对齐方式。

Flex容器和Flex项目上设置对齐方式

你可能已经知道在Flex容器上设置justify-content、align-items的值为center时,可以让元素在Flex容器中达到水平垂直居中的效果。来看一个示例:

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

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

效果如下:

网页布局:Flexbox中实现水平垂直居中

Demo(codepen.io/airen/embed…)

这种方式特别适应于让Icon图标在容器中水平垂直居中,不同的是在Icon图标容器上显示设置display: inline-flex。比如下面这个示例:

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

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

效果如下:

网页布局:Flexbox中实现水平垂直居中

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;
}
复制代码

效果如下:

网页布局:Flexbox中实现水平垂直居中

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;
}
复制代码

效果如下:

网页布局:Flexbox中实现水平垂直居中

Demo(codepen.io/airen/embed…)

如果在Flex容器中有多个Flex项目时,该方法同样有效:

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

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

比如下面这个效果:

网页布局:Flexbox中实现水平垂直居中

Demo(codepen.io/airen/embed…)

除此之外,还可以使用place-content: center让Flex项目实现水平垂直居中:

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

.flex__item {
    align-self: center;
}

复制代码

效果如下:

网页布局:Flexbox中实现水平垂直居中

Demo(codepen.io/airen/embed…)

或者换:

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

效果如下:

网页布局:Flexbox中实现水平垂直居中

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;
}

复制代码

效果如下:

网页布局:Flexbox中实现水平垂直居中

Demo(codepen.io/airen/embed…)

可能很多同学对于place-content和place-items会感到陌生。其实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;
}
复制代码

在Flex项目上设置margin: auto

如果在Flex容器中只有一个Flex项目,还可以显式在Flex项目中显式设置margin的值为auto,这样也可以让Flex项目在Flex容器中水平垂直居中。例如:

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

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

效果如下:

网页布局:Flexbox中实现水平垂直居中

Demo(codepen.io/airen/embed…)

整个过程,你可以通过下面这个示例来体验。尝试着选中不同方向的margin值:

网页布局:Flexbox中实现水平垂直居中

Demo(codepen.io/airen/embed…

作者:阿里巴巴淘系技术
链接:https://juejin.im/post/6865107864139087886
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: