事实上,每次面试前端必问的问题就是这个。及其常见的需求,看起来似乎非常简单,但是实现起来很费劲,尤其是涉及尺寸不固定的元素。

本篇文章将介绍比较流行的几种方法。

行内块

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

看起来已经完美解决了,但是它还有以下的缺陷:

  1. 绝对定位会对整体的布局造成很强烈的影响。
  2. 如果居中的元素超过了视窗会被裁剪掉。
  3. 在某些浏览器中,元素可能会被放置在半个像素上造成模糊。

视口居中

如果我们不采用绝对定位,对子元素设置margin使其左上角置于父元素中点,再用translate重复上一种方法的操作,是否可以实现呢?

答案是不可以,因为margin的百分比是以父元素的宽度为基准的,即便是top和bottom也是! 没错,很扯。

如果仅仅想要垂直于视口,我们可以采用css中相对于视口的单位 vwvhvminvmax

  • 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 — 垂直居中的更多相关文章

  1. CSS垂直居中指南

    大概整理下css中的垂直居中问题 主要分两大类 1 知道块元素尺寸,一般就是指知道元素高度. 方法一:最简单的,类比水平居中. 思路:子元素设置为absolute;  top bottom都设置为0 ...

  2. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  3. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  4. CSS垂直居中完美有用实例

    <!DOCTYPE HTML>           <html>            <head>             <meta meta chars ...

  5. Day14:CSS垂直居中

    verticle-align:middle vertical-align:middle实现css垂直居中是常用的方法,但是需要注意,vertical生效的前提是diaplay:inline-block ...

  6. CSS垂直居中的8种方法

    CSS垂直居中的8种方法 1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注 ...

  7. 完美实现CSS垂直居中的11种方法

    在做前端项目时CSS的水平居中我们经常使用,但有时还会用到CSS垂直居中,对于小白来说这个就有些难度了,下面看一下我是如何实现的 本人前端小白,正在做一个小程序开发的项目,css样式调整搞的头都大了. ...

  8. css 垂直居中技巧

    CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...

  9. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

随机推荐

  1. 7-1 shell编程基础之二

    shell编程基础之二 算数运算 bash中的算术运算:help let +, -, *, /, %取模(取余), **(乘方),乘法符号有些场景中需要转义 实现算术运算: (1) let var=算 ...

  2. @Validated和@Valid校验参数、级联属性、List

    @Validated和@Valid的区别 在Controller中校验方法参数时,使用@Valid和@Validated并无特殊差异(若不需要分组校验的话): @Valid:标准JSR-303规范的标 ...

  3. 白盒测试笔记之:Junit 单元测试以及测试覆盖率

    单元测试: 单元测试是从代码层面验证代码的正确性. 一般考虑接口中的数据结构是否正确,变量的临界条件,如空字符串,空集合等. ​ Junit入门  参考: Junit 入门教程: https://ww ...

  4. ng-zorro等组件默认样式的修改

    https://www.jianshu.com/p/8b887c2aac06 在项目中修改ng-zorro组件默认样式的一些方法: 类名等 前加::ng-deep: 类名等 前加:root: 类名等 ...

  5. 【Linux 网络编程】常用TCP/IP网络编程函数

    (1)函数socket /**************************************************************** ** 功能:创建一个套接字用于通信 ** 参 ...

  6. 区间最值的优秀数据结构---ST表

    ST表,听起来高大上,实际上限制非常多,仅仅可以求最值问题: 为什么?先从原理看起: st表运用了倍增的思想:st[i][j] = min(st[i][j - 1],st[i + 2^(j - 1)) ...

  7. React 中的函数式思想

    函数式编程简要概念 函数式编程中一个核心概念之一就是纯函数,如果一个函数满足一下几个条件,就可以认为这个函数是纯函数了: 它是一个函数(废话): 当给定相同的输入(函数的参数)的时候,总是有相同的输出 ...

  8. Css几个兼容性问题

    1.BUG_fireFox!!!一个容器内的子容器如果要左右浮动的话,需要在这个容器设置上样式:"overflow:hidden". 注:内部元素浮动就会导致外面的容器的高度在fi ...

  9. vue运行碰到的问题

    Expected indentation of 0 spaces but found 2 解决方案: 文件中加入"indent": ["off", 2]就可以了 ...

  10. java web实现同一账号在不同浏览器不能同时登录

    网上看了很多方法,个人也看了,自己也总结了几个比较常用的: 前提都是用session监听器,对session的创建与销毁进行监听 一.在用户登录时保存该用户的状态有这几种保存方式: 1.保存到内存中( ...