vue垂直布局_CSS⽔平垂直居中布局⽅案概述
在前端开发中，通过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;
}
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*/
/*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*/
/*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 {
css设置文字垂直居中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 层级代码如下：
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;
}
完毕

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。