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

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

行内块

<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. Python爬虫学习==>第七章:urllib库的基本使用方法

    学习目的: urllib提供了url解析函数,所以需要学习正式步骤 Step1:什么是urllib urllib库是Python自带模块,是Python内置的HTTP请求库 包含4个模块: >& ...

  2. react中路由跳转push与replace的区别

    路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...

  3. python学习之数据类型(int,bool,str)

    第三章 数据类型 3.1 Python基本数据类型 类型 含义 描述 int 整数 主要用来进⾏数学运算 str 字符串 可以保存少量数据并进⾏相应的操作 bool 布尔值 判断真假,True,Fal ...

  4. PJzhang:从csdn到pipal密码分析工具

    猫宁!!! 偶然看到一篇短文,是对2011年csdn泄露的约643万数据的数据汇总分析,这里做个简要总结 .   一.单一密码使用5000人以上的,14个,当时密码中有两个命名方式很有趣,dearbo ...

  5. 出现错误lambda expressions are not supported at language level 7解决方法

    AS工程出现题目中的错误.解决办法: 这两个选中为1.8. 然后AS会自动在app的build.gradle下面,android{}里面增加 同时会修改app.iml文件中的如下部分,将Languag ...

  6. 复杂json格式转化为javabean

    工具阿里巴巴的fastjson包 <!-- https://mvnrepository.com/artifact/com.alibaba/fastjson --><dependenc ...

  7. 【STM32】NVIC中断优先级管理

    (1)NVIC中断优先级分组 1>,CM4内核支持256个中断,其中包含了16个内核中断和240个外部中断,并且 具有256级的可编程中断设置. 2>,STM32F4并没有使用CM4的内核 ...

  8. 啃掉Hadoop系列笔记(01)-Hadoop框架的大数据生态

    一.Hadoop是什么 1)Hadoop是一个由Apache基金会所开发的分布式系统基础架构 2)主要解决,海量数据的存储和海量数据的分析计算问题. 3)广义上来说,HADOOP通常是指一个更广泛的概 ...

  9. 什么是云数据库 HBase 版

    云数据库 HBase 版(ApsaraDB for HBase)是基于 Hadoop 的一个分布式数据库,支持海量的PB级的大数据存储,适用于高吞吐的随机读写的场景.目前在阿里内部有数百个集群,100 ...

  10. linux shell脚本中使用expect(脚本打开新终端自动远程连接顺便输一点指令)(巨坑)

    放弃吧 我找了六个小时都没找到可以用的方案(指标题括号里的内容) 给个曲线救国的方法: 现把expect脚本写成一个文件 在另一个shell脚本中调用