CSS 垂直居中的七种方法——史上最详细总结
博主目前在蚂蚁集团-体验技术部,AntV/S2 是博主所在团队的开源项目——多维交叉分析表格,欢迎使用,感谢到 S2 github 仓库点赞 star,有任何关于前端面试、就业、技术问题都可给在文章后留言。
我们在写页面时,通常会用到水平居中或垂直居中,而水平居中很好处理,不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦,下面介绍七种纯 CSS 实现垂直居中的方式。
一、设定行高(line-height)
设定行高是垂直居中最简单的方式,适用于“单行”的“行内元素”(inline、inline-block),例如单行的标题,或是已经设为 inline-block 属性的 div,若将 line-height 设成和 height 一样的数值,则内容的行内元素就会被垂直居中,因为是行高,所以会在行内元素的上下都加上行高的1/2,所以就垂直居中了。不过由此就可以看出,为什么必须要单行的行内元素,因为如果多行,第二行与第一行的间距会变大,就不是我们所期望的效果了。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直居中1</title><style>.box {width: 300px;height: 200px;border: 1px solid #000;line-height: 200px;text-align: center;}.vertical {display: inline-block;width: 30px;height: 30px;background: crimson;}</style>
</head>
<body><h2>设定行高line-height实现垂直居中</h2><div class="box"><div class="vertical"></div></div>
</body>
</html>
二、添加伪元素(::before、::after)
刚刚第一种方法,虽然是最简单的方法(适用于单行标题),不过就是只能单行,所以我们如果要让多行的元素也可以垂直居中,就必须要使用伪元素的方式。CSS 里头 vertical-align 这个属性虽然是垂直居中,不过却是指在元素内的所有元素垂直位置互相居中,并不是相对于外框的高度垂直居中。利用 ::before 和 ::after,让这个“伪” div 的高度为100%,就可以轻松地让其他的 div 都居中。不过 div 记得要把 display 设为 inline-block,毕竟 vertical-align:middle; 是针对行内元素,div 本身是 block。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直居中2</title><style>.div0::before {content: "";width: 0;height: 100%;display: inline-block;position: relative;vertical-align: middle;}.div0 {width: 300px;height: 200px;border: 1px solid #000;text-align: center;}.redbox {width: 30px;height: 30px;background: red;display: inline-block;vertical-align: middle;}.greenbox {width: 30px;height: 60px;background: green;display: inline-block;vertical-align: middle;}.bluebox {width: 30px;height: 40px;background: blue;display: inline-block;vertical-align: middle;}</style>
</head>
<body><h2>添加伪元素(::before、::after)</h2><div class="div0"><div class="redbox"></div><div class="greenbox"></div><div class="bluebox"></div></div>
</body>
</html>
三、calc动态计算
看到这边或许会有疑问,如果 div 必须要是 block,该怎么让它垂直居中呢?这时候就必须用到 CSS 特有的 calc 动态计算的能力,我们只要让要居中的 div 的 top 属性,与上方的距离是“50%的外框高度+ 50%的 div 高度”,就可以做到垂直居中,至于为什么不用 margin-top,因为 margin 相对的是水平高度,必须要用 top 才会正确。注意使用:position: relative;
代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直居中3</title><style>.div0 {width: 300px;height: 200px;border: 1px solid #000;}.redbox {width: 30px;height: 30px;background: red;position: relative;top: calc(50% - 15px);float: left;margin-left: calc(50% - 45px);}.greenbox {width: 30px;height: 60px;background: green;position: relative;top: calc(50% - 30px);float: left;}.bluebox {width: 30px;height: 40px;background: blue;position: relative;top: calc(50% - 20px);float: left;}</style>
</head>
<body><h2>calc动态计算</h2><div class="div0"><div class="redbox"></div><div class="greenbox"></div><div class="bluebox"></div></div>
</body>
</html>
四、使用表格或假表格
在表格这个 HTML 里面常用的 DOM 里头,要实现垂直居中是相当容易的,只需要加一行 vertical-align:middle 就可以,为什么呢?最主要的原因就在于 table 的 display 是 table ,而 td 的 display 是 table-cell ,所以我们除了直接使用表格之外,也可以将要垂直居中元素的父元素的 display 改为 table-cell ,就可以轻松达成,不过修改 display 有时候也会造成其他样式属性的连动影响,需要比较小心使用。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直居中4</title><style>.like-table {display: table-cell;}td, .like-table {width: 300px;height: 200px;border: 1px solid #000;vertical-align: middle;}td div, .like-table div {width: 150px;height: 100px;margin: 0 auto;color: #ffffff;line-height: 100px;text-align: center;background: darkgreen;}.like-table div {background: crimson;}</style>
</head>
<body><h2>使用表格或假表格</h2><table><tr><td><div>表格垂直居中</div></td></tr></table><div class="like-table"><div>假的表格垂直居中</div></div>
</body>
</html>
五、使用transform
transform 是 CSS3 的新属性,主要掌管元素的变形、旋转和位移,利用 transform 里头的 translateY(改变垂直的位移,如果使用百分比为单位,则是以元素本身的长宽为基准),搭配元素本身的 top 属性,就可以做出垂直居中的效果,比较需要注意的地方是,子元素必须要加上 position: relative,不然就会没有效果。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直居中5</title><style>.use-transform {width: 300px;height: 200px;border: 1px solid #000000;}.use-transform div {position: relative;width: 100px;height: 50px;background: darkgreen;margin-left: calc(50% - 50px);top: 50%;transform: translateY(-50%);}</style>
</head>
<body><h2>使用transform</h2><div class="use-transform"><div></div></div>
</body>
</html>
六、绝对定位
绝对定位就是 CSS 里头的 position: absolute,利用绝对位置来指定,但垂直居中的做法又和我们正统的绝对位置不太相同,是要将上下左右的数值都设为0,再搭配一个 margin: auto,就可以办到垂直居中,不过要特别注意的是,设定绝对定位的子元素,其父元素的 position 必须要指定为 relative,而且绝对定位的元素是会互相覆盖的,所以如果内容元素较多,可能就会有些问题。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直居中6</title><style>.use-absolute {position: relative;width: 300px;height: 200px;border: 1px solid #000000;}.use-absolute div {position: absolute;width: 100px;height: 50px;top: 0;right: 0;bottom: 0;left: 0;margin: auto;background: chocolate;}</style>
</head>
<body><h2>绝对定位</h2><div class="use-absolute"><div></div></div>
</body>
</html>
七、使用Flexbox
使用 align-items 或 align-content 的属性,轻轻松松就可以做到垂直居中的效果。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直居中7</title><style>.use-flexbox {display: flex;align-items: center;justify-content: center;width: 300px;height: 200px;border: 1px solid #000000;}.use-flexbox div {width: 100px;height: 50px;background: coral;}</style>
</head>
<body><h2>使用Flexboxs</h2><div class="use-flexbox"><div></div></div>
</body>
</html>
以上就是一些垂直居中的方法,由于垂直居中往往会动用到修改 display 这个属性,往往也会在排版上造成一些影响,例如不该用 flexbox 的地方如果用了 flexbox,不该用 table 的地方用了 table,不该用 inline-block 的地方用了 inline-block,后续反而要多写许多其他的定位样式来修正,那就有点本末倒置了,因此如何活用这些 CSS 垂直居中的方法,就要看版面结构而灵活运用。
博主水平有限,若发现文中存在问题,欢迎留言指正!
学习之路永无止境!
CSS 垂直居中的七种方法——史上最详细总结相关推荐
- 高度不定垂直居中_经典:CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
- 经典:CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
- div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法 文章目录 学习笔记(一) 前言 一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四 二.flex布局法 1.方法五 三.将小div转成行内块 ...
- CSS中垂直居中的七种方法
前言: 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto:或是text-align:center:,就可以轻松解决掉水平居中的问题 ...
- CSS垂直居中的七个方法
我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto:或是text-align:center:,就可以轻松解决掉水平居中的问题,但一直 ...
- css 图文 上下 居中,CSS垂直居中的6种方法
垂直居中一直是CSS布局中比较令人头疼的问题,相比于水平居中,垂直居中对于不同的元素类型需要采取截然不同的策略,因此常常会因为策略的误用导致无法成功居中.这篇文章总结了垂直居中的6种常见策略. Ver ...
- CSS垂直居中的6种方法
垂直居中一直是CSS布局中比较令人头疼的问题,相比于水平居中,垂直居中对于不同的元素类型需要采取截然不同的策略,因此常常会因为策略的误用导致无法成功居中.这篇文章总结了垂直居中的6种常见策略. 1.V ...
- CSS垂直居中的8种方法
1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...
- Html+CSS垂直居中的N种方法(大全)
1. absolute + margin auto 利用元素 position: absolute 和 margin: auto实现垂直居中,适用于父子盒子里. 代码: .parent{positio ...
最新文章
- LINQ to XML 建立,读取,增,删,改
- MySQL安装ODBC驱动出现126错误
- java桌游设计,java毕业设计_springboot框架的桌游吧管理
- android java 回调方法接口
- 使用 Eigen 库写第一个程序
- 变与不变——一汽-大众的数字化人才战略“突围”
- 网络原理(四)-----动态路由协议篇
- Rustup 管理工具
- http 安全性和幂等性_HTTP方法:幂等性和安全性
- Windows下动态库的制作与使用
- WINDOWS下获取目录环境变量的C代码
- ml sparksql 数据比较_Spark 及其上层应用 SparkSQL(六)
- android手机刷ios6,iOS8.4降级6.1.3教程 iPhone4s降级iOS6.1.3
- 关于平面束方程的理解
- 服务器系统有哪些,各有什么特点?
- 做什么样的软件才能赚钱? 学什么样的知识才能赚钱? 肖舸老师
- RedHat认证介绍
- 词典GoldenDict
- QT之调用百度地图离线API
- 万台服务器一人挑的奥秘