从头开始 — 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种垂直居中的实现方式均为笔者在日常 ...
随机推荐
- Unity中的动画系统和Timeline(1) 普通动画创建
学习使用版本:Unity2017.1.1 目标:给一个Cube创建动画 一:第一种创建方法 1 Windows —— Animation,打开Aniamtion动画界面,此时显示 因为此时没有任何动画 ...
- 【机器学习】Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Rand forest 和 gradient boosting
Jackknife,Bootstraping, bagging, boosting, AdaBoosting, Rand forest 和 gradient boosting 这些术语,我经常搞混淆, ...
- windows 安装 celery 避坑指南,看这篇就够了
- Type类的使用
Type类的使用(类反射)通过类获得Type: Type t = typeof(Person)通过实例对象获得类的Type: Type t = p.GetType()获取Type的方法:MethodI ...
- 使用php过滤emoji表情
/** * 过滤字符串中表情 * @param $str string 昵称 * @return string */ public function filterEmoji($str) { $str ...
- 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。
今天使用npm安装插件时出现了以下错误: 经查,原因:现用执行策略是 Restricted(默认设置) 解决办法: 1.win+X键,使用管理员身份运行power shell 2.输入命令:set-e ...
- @RequestMapping-标准映射和Ant风格的映射
4.@RequestMapping 如果value不以“/”开头,SpringMVC会自动添加“/” 4.1.@RequestMapping映射 4.1.1.标准URL映射 4.1.2.Ant风格的U ...
- PHP 网站大数据大流量与高并发 笔记
前端: 1.域名开启cdn 2.大文件使用oss php: 1.模板编译缓存 服务器: 1.负载均衡 数据库: 1.读写分离 待完善
- flat 的用法
今天在项目中,看到了flat的一个语法,是我之前没有用过的,所以有必要记录下来,作为新的知识点,巩固我自己的知识点: 附赠转载连接:https://developer.mozilla.org/zh-C ...
- TKmybatis和mybatisplus哪个好用
文档连接 :http://baomidou.oschina.io/mybatis-plus-doc/#/?id=%E7%AE%80%E4%BB%8B https://gitee.com/hengboy ...