从头开始 — CSS — 垂直居中
事实上,每次面试前端必问的问题就是这个。及其常见的需求,看起来似乎非常简单,但是实现起来很费劲,尤其是涉及尺寸不固定的元素。
本篇文章将介绍比较流行的几种方法。
行内块
<body>
<div id="ghost"></div>
<span>
hello
</span>
</body>
#ghost {
display: inline-block;
height: 20em;
vertical-align: middle;
}
本质上是利用了内联元素的 vertical-align 属性,通过将此属性置为middle,同一行内的内联元素都将以设置这一属性的内联元素的基线对齐。
基于inline-block特有的属性:拥有内联元素的特性同时可以定义宽高,我们可以设置一个ghost行内块用于定义高度,再让其他内联元素与其对齐,实现垂直居中。
当然我们也可以将其它元素置为行内块,再设置宽度并添加text-align使其水平居中。
总结一下,此方法太过hack。
绝对定位
子元素固定宽高
<div id="main">
<div id="child">
hello
</div>
</div>
#main {
background-color: green;
height: 20em;
width: 20em;
position: relative;
}
#child {
position: absolute;
background: yellow;
top: 50%;
left: 50%;
height: 10em;
width: 10em;
margin-top: -5em;
margin-left: -5em;
}
显然,这种方法的原理是:先利用绝对定位将这个元素的左上角放置与父元素的正中间,再利用负边距将它向左上移动它本身的一半。
如果借助calc()函数可以说明得更加清楚:
#child {
position: absolute;
top: calc(50%-5em);
left: calc(50%-5em);
height: 10em;
width: 10em;
}
不固定宽高
实际中大多数时候我们并不知道子元素的实际宽高。
如果你属性translate()函数,你一定知道当它的参数为百分比时,它会按照元素本身的百分比值进行变换,我们可以通过这个方法彻底摆脱对尺寸的依赖!
#child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
看起来已经完美解决了,但是它还有以下的缺陷:
- 绝对定位会对整体的布局造成很强烈的影响。
- 如果居中的元素超过了视窗会被裁剪掉。
- 在某些浏览器中,元素可能会被放置在半个像素上造成模糊。
视口居中
如果我们不采用绝对定位,对子元素设置margin使其左上角置于父元素中点,再用translate重复上一种方法的操作,是否可以实现呢?
答案是不可以,因为margin的百分比是以父元素的宽度为基准的,即便是top和bottom也是! 没错,很扯。
如果仅仅想要垂直于视口,我们可以采用css中相对于视口的单位 vw、vh、vmin、vmax
- 1vw 表示视口宽度的1%,同理1vh等于视口高度的1%
- 当视口宽度小于高度时,1vmin=1vw,否则1vmin=1vh,另一种情况同理。
#child {
margin:50vh auto 0;
transform: translateY(-50%);
}
它只能基于视口居中。
Flexbox
flex当然是未来的趋势,上面的一切都可以理解成为了照顾老旧的浏览器的猴戏(虽然translate和视口单位的兼容性也不怎么好)。
<body>
<div id="main">hello</div>
</body>
#main {
margin: auto;
}
body {
display: flex;
}
啊,很难受。使用flexbox时,margin:auto不仅在水平方向上将元素居中,垂直方向上也是如此。
如果你熟悉flex的话,其实还有多种实现方式。
body {
display: flex;
justify-content: center;
align-items:center;
}
或者对子元素单独设置交叉轴对齐方式:
body {
display: flex;
justify-content: center;
}
#main {
align-self:center;
}
从头开始 — CSS — 垂直居中的更多相关文章
- CSS垂直居中指南
大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute; top bottom都设置为0 ...
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- css垂直居中方法
CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.
- CSS垂直居中完美有用实例
<!DOCTYPE HTML> <html> <head> <meta meta chars ...
- Day14:CSS垂直居中
verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法,但是需要注意,vertical生效的前提是diaplay:inline-block ...
- CSS垂直居中的8种方法
CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...
- 完美实现CSS垂直居中的11种方法
在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...
- css 垂直居中技巧
CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...
- CSS垂直居中的11种实现方式
今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...
随机推荐
- 7-1 shell编程基础之二
shell编程基础之二 算数运算 bash中的算术运算:help let +, -, *, /, %取模(取余), **(乘方),乘法符号有些场景中需要转义 实现算术运算: (1) let var=算 ...
- @Validated和@Valid校验参数、级联属性、List
@Validated和@Valid的区别 在Controller中校验方法参数时,使用@Valid和@Validated并无特殊差异(若不需要分组校验的话): @Valid:标准JSR-303规范的标 ...
- 白盒测试笔记之:Junit 单元测试以及测试覆盖率
单元测试: 单元测试是从代码层面验证代码的正确性. 一般考虑接口中的数据结构是否正确,变量的临界条件,如空字符串,空集合等. Junit入门 参考: Junit 入门教程: https://ww ...
- ng-zorro等组件默认样式的修改
https://www.jianshu.com/p/8b887c2aac06 在项目中修改ng-zorro组件默认样式的一些方法: 类名等 前加::ng-deep: 类名等 前加:root: 类名等 ...
- 【Linux 网络编程】常用TCP/IP网络编程函数
(1)函数socket /**************************************************************** ** 功能:创建一个套接字用于通信 ** 参 ...
- 区间最值的优秀数据结构---ST表
ST表,听起来高大上,实际上限制非常多,仅仅可以求最值问题: 为什么?先从原理看起: st表运用了倍增的思想:st[i][j] = min(st[i][j - 1],st[i + 2^(j - 1)) ...
- React 中的函数式思想
函数式编程简要概念 函数式编程中一个核心概念之一就是纯函数,如果一个函数满足一下几个条件,就可以认为这个函数是纯函数了: 它是一个函数(废话): 当给定相同的输入(函数的参数)的时候,总是有相同的输出 ...
- Css几个兼容性问题
1.BUG_fireFox!!!一个容器内的子容器如果要左右浮动的话,需要在这个容器设置上样式:"overflow:hidden". 注:内部元素浮动就会导致外面的容器的高度在fi ...
- vue运行碰到的问题
Expected indentation of 0 spaces but found 2 解决方案: 文件中加入"indent": ["off", 2]就可以了 ...
- java web实现同一账号在不同浏览器不能同时登录
网上看了很多方法,个人也看了,自己也总结了几个比较常用的: 前提都是用session监听器,对session的创建与销毁进行监听 一.在用户登录时保存该用户的状态有这几种保存方式: 1.保存到内存中( ...