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

可点击这里查看 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;
    }

在这里插入图片描述


完毕
公众号 我的大前端生涯

4 声望
0 粉丝
0 条评论
推荐阅读
flutter AnimatedPositionedDirectional 使用解析
在 Flutter 中,AnimatedPositionedDirectional 组件应用在 Stack 中,当位置或者是大小改变时,呈动画效果

早起的年轻人阅读 674

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.2k评论 2

封面图
【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan30阅读 2.2k评论 2

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.5k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco25阅读 2.1k

封面图
4 声望
0 粉丝
宣传栏