CSS 快速实现水平垂直居中

CSS 快速实现水平垂直居中

文章目录


一、前言

本文探究的是如何快速实现水平垂直居中,重点在于快速两个字,我对于快速的理解,一是不需要编写大量的 CSS 属性,二是不需要手动计算居中的具体位置数值 ,基于这两个前提下,使用像 line-height 和定位布局这种方式是不被允许的,那还剩下什么选择呢?答案就是使用弹性布局。


二、弹性布局普遍做法

对于有前端基础的朋友来讲,这个方法实在是太普遍了,无非就是基于 justify-contentalign-self 属性实现的,也没啥内容好提的。

html 复制代码
<div class="flex-wrap">
  <div class="flex-content"></div>
</div>

<style>
	.flex-wrap {
      /* 核心内容 */
      display: flex;
      justify-content: center;
      align-items: center;
      /* 无关紧要的 */
      width: 100vw;
      height: 100vh;
    }
    .flex-content {
      /* 无关紧要的 */
      width: 100px;
      height: 100px;
      background-color: orange;
    }
</style>

三、弹性布局的妙用

如果只是讲大多数人都会使用的弹性布局居中属性,那也太没意思了,在此讲解一个大多数都不知道的方法,相较于普通做法而言,只需要两个CSS属性即可实现。
该实现基于 FFC(Flex Formatting Contexts)、GFC(GridLayout Formatting Contexts) 上下文布局。

在WSC规范文档中弹性盒子部分,有这么一句描述:Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension,翻译一下的意思是:任何正的剩余空间将会在 justify-contentalign-self 属性之前被分配到该维度的自动边距中 ,这意味这 margin: auto 属性不仅仅作用于水平方向,甚至可以作用于垂直方向上!

html 复制代码
  <div class="flex-wrap">
    <div class="flex-content"></div>
  </div>

<style>
  .flex-wrap {
    /* 核心内容 */
    display: flex;
    /* 无关紧要的 */
    width: 100vw;
    height: 100vh;
  }
  .flex-content {
    /* 核心内容 */
    margin: auto;
    /* 无关紧要的 */
    width: 100px;
    height: 100px;
    background-color: pink;
  }
</style>

看着很牛很方便,但是在使用得当的前提下进行,此方法还是有一定的缺陷,但影响很小:

  • 使用此方法的前提是,需要明确是否为父子元素布局,父元素与子元素都要各自设置一个属性,对于非固定的子元素,我的建议是还是在父元素上使用传统的justify-contentalign-self 属性。
  • 值得一提的是,margin: auto 是在justify-contentalign-self 属性之前实现的,既然剩余空间都被分配完了,无可避免会造成这两个属性的失效,那目标就很明确了,确定只是水平垂直方向居中的话,从这两个方法中选一个,两者不能同时存在。

参考资料💘

🍅因发布平台差异导致阅读体验不同,源文贴出:《CSS 快速实现水平垂直居中》


推荐博文🍗

相关推荐
2501_915918411 天前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂1 天前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 天前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 天前
JavaScript二叉树相关概念
前端
rannn_1111 天前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
attitude.x1 天前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java1 天前
CSS3核心技术
前端·css·css3
空山新雨(大队长)1 天前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术1 天前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体