文档章节

《css 揭秘》 之垂直居中的实现

IrisHuang
 IrisHuang
发布于 04/23 09:57
字数 1103
阅读 8
收藏 1

最近看了 Lea Verou 的 《css揭秘》一书,让我对自己的 css学习产生了深深的怀疑。这本书真是太棒了,里面涉及到很多优雅又有趣的效果实现,真的是非常棒。如果你有时间,十分建议你去看看。

元素的垂直居中是一个前端er无法忽视的问题,因为在网页中,它的应用实在太多了。网上也有很多关于如何实现垂直居中的问题以及应对方法。比如利用table,或是改变元素的 display;以前也写过一份关于垂直居中实现的总结,这次看了这个书,它有新的更加优雅的实现。让我抑制不住要把它记录在这里。

它采用的是 css 的变形属性 translate() 和 flexbox 布局。首先说说translate()。

以前的定位方案

先看看早期的垂直居中方案,它要求元素有固定的宽高;

main {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -3em; /* 6/2 = 3 */
	margin-left: -9em; /* 18/2 = 9 */
	width: 18em;
	height: 6em;
}

这段代码在干嘛呢?它实际做了以下几件事:先把这个元素的左上角放置在视口(或最近的定位属性的祖先元素)的正中心,然后利用负外边距把它向左、向上移动(移动距离为自身宽高的一般),从而把元素的正中心放置在视口的正中心。借助强大的calc元素,代码可以节省成:

main {
	position: absolute;
	top: calc(50% - 3em);
	left: calc(50% - 9em);
	width: 18em;
	height: 6em;
}

很显然,这个方法最大的局限在于它要求元素的宽高是固定的,在通常情况下,对那些需要居中的元素来说,其尺寸往往是由其内容决定的。如果能找到一个属性的百分比值以元素自身的的宽高作为解析基准,那问题就解决了。虽然绝大多数 css 属性,百分比都是以其父元素的尺寸为基准进行解析的,但是总有些例外。比如变形属性:translate();

当我们在translate()变形函数中使用百分比时,是以这个元素自身的宽度和高度为基准进行换算和移动的,而这正是我们需要的。这样可以彻底解除对固定尺寸的依赖;

main {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

这个方法也有需要注意的地方:

  • 有时不能使用绝对定位,因为它对整个布局的影响太过影响;
  • 如果需要居中的元素已经在高度上超过视口,那它的顶部会被视口裁切掉;

假设我们不想使用绝对定位, 仍然可以采用 translate() 技巧来把这个元素以其自身宽高的一半为距离进行移动; 但是在缺少 left 和 top 的情况下, 如何把这个元素的左上角放置在容器的正中心呢?像下面这样

main {
	width: 18em;
	padding: 1em 1.5em;
	margin: 50vh auto 0;
	transform: translateY(-50%);
}

但是这种只适用于在是视口中居中的场景;

基于flex-box的解决方案

只需写两行声明:先给待居中元素设置 display:flex,再给这个元素自身设置我们再熟悉不过的margin:auto;

body {
	display: flex;
  	min-height:1Lea Verou00vh;
	margin:0;
}
main {
	margin: auto;
}

当我们使用 flexbox 时,margin:auto 不仅会在水平方向上将元素居中,垂直方向上也是如此;我们甚至不需要只当任何宽度,这个居中元素分配的宽度等于 max-content; flexbox 的另一个好处是,它还可以将匿名容器垂直居中,如下:

<main>Center me, please!</main>

我们先给这个 main 元素指定一个固定的尺寸,然后借助 flexbox 规范中的 align-items 和 justify-content 属性,我们可以让它内部的文本也实现居中;

main {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18em;
	height: 10em;
}

这样就轻松实现了垂直居中的效果。

© 著作权归作者所有

IrisHuang
粉丝 3
博文 67
码字总数 38748
作品 0
武汉
前端工程师
私信 提问
垂直居中实现方式总结

在网页制作过程中,我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 实现垂直居中 这种方法适用于单行文本垂直居中,如果文本内容太长,出现了换行,换行后的...

呵呵闯
2016/12/05
16
0
关于CSS制作水平/垂直居中对齐问题

作为前端开发者,在制作Web页面时都有碰到CSS制作水平垂直居中的问题,我想大家都有研究过或者写过,特别是其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作水平/垂直居...

ACE-705
2014/05/07
0
0
css实现水平、垂直居中的几种方法

用text-align: center来实现水平居中(只能实现文本的水平居中) //html<div class="center"> 文本水平居中</div>//css.center{width: 200px;height: 100px;background-color: #a036b4; text......

lironghua
2014/05/07
0
0
CSS实现垂直居中的常用方法

作者:渔歌 网址:http://www.cnblogs.com/yugege/p/5246652.html 在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素...

数通畅联
2016/04/15
72
0
css实现水平居中和垂直居中及其浏览器兼容性

不管是在网站的布局还是显示图片,需要水平居中和垂直居中的情况是很常见的。今天我们就开始对css的水平居中和垂直居中的一些常见方法在各种浏览器下进行测试和归纳。 浏览器说明:本文涉及到...

黄梦巍
2013/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

硬件配置

https://akkadia.org/drepper/futex.pdf sudo lshw -businfo[sudo] lambda 的密码: Bus info Device Class Description======================================......

MtrS
今天
2
0
springmvc的return “success”源码解读

qqqq

architect刘源源
今天
5
0
Java程序员五面阿里分享 逆袭成功 太不容易了!

前言 拿到阿里实习offer,经历了5次面试,其中4轮技术面,1轮HR面试。在这里分享一下自己的面试经验和学习心得。希望能够帮助更多的小伙伴。 我本科毕业于中南大学信管专业,真正开始学习Jav...

别打我会飞
昨天
4
0
Android Camera模块解析之视频录制

《Android Camera架构》 《Android Camera进程间通信类总结》 《Android Camera模块解析之拍照》 《Android Camera模块解析之视频录制》 《Android Camera原理之CameraDeviceCallbacks回调模...

天王盖地虎626
昨天
2
0
手把手教你使用issue作为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了可以将 GitHub 的 issue 当作评论系统,插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。个人博客使用的是VuePress。 TLDR (不多废...

jump--jump
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部