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;}
完毕
CSS水平垂直居中布局方案概述相关推荐
- vue垂直布局_CSS水平垂直居中布局方案概述
在前端开发中,通过CSS实现布局容器的居中,也有诸多方法方式,当然也是CSS面试题中的经典面试题,在本文章中会系统的分析综述 通过 Flexbox 布局模块 与 CSS Grid布局模 实现容器的居中 ...
- css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现 兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
- css 水平垂直居中实现方式
css 水平垂直居中实现方式 css中有好多实现居中的方式,在项目中经常不知道使用哪种方式会比较好,所以记录下来. 水平垂直居中包括行内元素居中,以及块级元素居中 行内元素html结构 <div ...
- CSS 水平垂直居中
方法一: 容器确定宽高:知识点:transform只能设置在display为block的元素上. <head> <meta charset="UTF-8"> ...
- css水平垂直居中四种常用方式
css水平垂直居中 第一种:flex布局水平垂直居中 思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
- css水平垂直居中对齐方式
css水平垂直居中总共有四种方法 ① 使用绝对定位 注意:使用绝对定位居中需要固定宽高 position:absolute; top:0; left:0; bottom:0; right:0; wid ...
- 16种CSS水平垂直居中方法
16种css水平垂直居中方法以及应用(文字.图片) 一.垂直居中 1.行内元素 基本思想:单行文本子元素line-height 值为父元素 height 值 .parent {height: 200p ...
- html 水平垂直居中,css水平垂直居中有几种实现方式?
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
- CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
最新文章
- ReentrantLock与公平锁、非公平锁实现
- java数组1 100偶数和_java – 数组偶数和奇数排序
- godaddy 管理mysql_在godaddy上使用MySQL和Entity Framework的安全例...
- pat天梯赛L1-055. 谁是赢家
- 恐龙机器人钢索恐龙形态_四川恐龙多,自贡是个窝——恐龙,我来了
- boost::type_traits模块用法的一些示例
- Exception in thread “Quartz Scheduler [HmpScheduler]“ org.springframework.scheduling.SchedulingExcep
- ES6 Map对象的使用
- 在OpenShift上扩展Java EE微服务
- Mac OS X下安装nvm的方法
- ORACLE JDBC 对千万数据 批量删除和批量插入
- 飞思卡尔单片机学习记录(一)
- 计算机并口被禁用,电脑并口被禁用怎么办
- 将8位的tif图片改为png图片
- 请结合实例说明欧洲中世纪哥特式建筑的风格特点
- html字幕英文,小猪佩奇第1-4季中英文对照字幕(自制学习文本)
- access 英语什么意思_access是什么意思_access怎么读_access翻译_用法_发音_词组_同反义词_入口_出口-新东方在线英语词典...
- 百度paddlepaddle七天打卡之青你实战
- 斐波那契数列的各种求法
- 解决删除谷歌浏览器chrome注册表残留问题
热门文章
- 合成视频以假乱真新高度!商汤科技、中科院、南洋理工大学联合提出当前最高清的语音驱动视频生成系统...
- 游戏3d建模师的待遇及发展
- gpt windows linux,UEFI+GPT环境下安装Windows+Linux+OS X
- vue 不识别svg_vue配置svg 图标显示不出来
- 收藏 | TensorRT部署深度学习模型
- 浙江大学最美学习笔记赏析!我太吃惊了
- php内支持sqlite,PHP能不能和sqlite搭配
- 想玩转工业界机器学习?先学Spark吧
- 不等式约束的序列二次规划(SQP)
- mysql某个表的列除以2_数据库mysql(二)