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

最近看了 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;
}

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