css中怎么优雅的实现垂直居中

这篇文章给大家分享的是有关css中怎么优雅的实现垂直居中的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

<强>前言

“44年前我们就把人类送上月球了,但现在我们仍然无法在css中实现垂直居中!”——堵塞安德森

在网页设计中,每当涉及到居中时,最重要的就是将元素及其父元素居中。听起来很简单,那你有没有考虑到很多的可能性呢(⊙o⊙) ?

<强>简单的:已知宽高的元素

如果你同时知道一个元素的宽和高,并且要将元素相对其父元素垂直居中,那么使用绝对定位来实现或许是一种比较不错的办法。

主要{ 　　,,,位置:,绝对; 　　,,,:,calc(50%,安康;3 em);,//向上移动等于父元素高度的50%及自身高度的一半 　　,,,左:,calc(50%,安康;9 em);,//向左移动距离等于父元素宽度的50%及自身宽度的一半 　　,,,宽度:,18 em; 　　,,,身高:,6 em; 　　}

<强>进阶:未知宽高的元素

但页面中很多元素都是未知宽高的。

主要{ 　　,,,位置:,绝对; 　　,,,:,50%; 　　,,,左:,50%; 　　,,,变换:,翻译(,,-50%,-50%); 　　}

<>强不适用绝对定位的情况

当我们不想使用绝对定位时,仍然可以用翻译()来将这个元素以其自身宽高的一半为距离来进行移动。

可以使用利润来达到移动的效果。

主要{ 　　,,,宽度:,18 em; 　　,,,填充:,13 m  1.5 em; 　　,,,保证金:,50 vh  auto  0;,//外边距使用,vh 为单位,因为保证金的百分比值是相对于其父元素的宽度作为基准解析,因此此处使用,vh 　　,,,变换:,translateY (, -50%); 　　}

<>强基于表布局

CSS表或许是个不错的选择。

因为表并不像常规块级元素一样渲染。比如说当元素宽100%时,表只会占据其中实际内容的宽度,而默认的块级元素则会自动的占据父级元素的100%。

& lt; table 风格=啊?00%;比; 　　,,,& lt; tr> 　　,,,,,,,& lt; td 风格=皌ext-align:,中心;,vertaical-align:, center"比; 　　,,,,,,,,,,,我是垂直居中的! 　　,,,,,,,& lt;/td> 　　,,,& lt;/tr> 　　& lt;/table>

如果考虑到页面语义化,可以这么做

.something-semantic  { 　　,,,显示:,表; 　　,,,宽度:,100%; 　　} 　　.something-else-semantic  { 　　,,,显示:,表格单元; 　　,,,text-align:,中心; 　　,,,vertical-align:,中间; 　　}

<强>行内块法

我们甚至可以考虑使用伪元素。
如果我们将伪元素在父元素内占满100%的高度,然后我们将伪元素以及希望垂直居中的元素同时设置vertrcal-align:中心。

然后我们就可以得到垂直居中的效果。

这是一种比较黑客的方法。

.block  { 　　,,text-align:中心; 　　,,空白:nowrap;} 　　} 　　,/*,将高度撑到100%,*/.block: before  { 　　,,内容:& # 39;& # 39;; 　　,,显示:inline-block; 　　,,身高:100%; 　　,,vertical-align:中间; 　　,,margin-right: -0.25 em;,/*, Adjusts  for  spacing  */}/*,要被垂直居中的元素,可以是任意宽高,*/, 　　.centered  { 　　,,显示:inline-block; 　　,,vertical-align:中间; 　　,,宽度:300 px; 　　}

<>强基于Flexbox的解决方案

Flexbox通常能让我们更好的操作他的子元素布的局,例如:

<李>

如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行;

css中怎么优雅的实现垂直居中