教你如何优雅的实现垂直居中(推荐)

  发布时间:2018-09-12 17:21:56   作者:Beginning丶2015   我要评论

这篇文章主要给大家介绍了关于如何优雅的实现垂直居中的相关资料,文中分别给大家介绍了已知宽高的元素、未知宽高的元素以及基于 Flexbox 的解决方案,都分别给出了示例代码供大家参考学习,需要的朋友们下面随着小编来一起学习学习吧

前言

css水平垂直居中的方法有很多,本文给大家介绍的方法非常的全面详细,分享出来供大家参考学习,下面来一起看看详细的介绍吧。

"44年前我们就把人类送上月球了,但现在我们仍然无法在 CSS 中实现垂直居中。" --Jams Anderson

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

简单的:已知宽高的元素

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


已知宽高的元素

main{
    position: absolute;
    top: calc(50% - 3em); //向上移动等于父元素高度的50%及自身高度的一半
    left: calc(50% - 9em); //向左移动距离等于父元素宽度的50%及自身宽度的一半
    width: 18em;
    height: 6em;
}

进阶: 未知宽高的元素

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


未知宽高的元素

基于绝对定位,进行扩展。

当我们在使用 translate( ) 变形函数计算百分比值时,是以这个元素自身的高度和宽度为基准来进行换算和移动的。

translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。

因此,只要换用基于百分比的 CSS 变形来对元素进行偏移,就不需要在编译量中将元素的尺寸写死了。

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

不适用绝对定位的情况

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

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

main{
    width: 18em;
    padding: 13m 1.5em;
    margin: 50vh auto 0; //外边距使用 vh 为单位,因为margin的百分比值是相对于其父元素的宽度作为基准解析,因此此处使用 vh
    transform: translateY( -50% );
}

基于table布局

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

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

<table style="100%">
    <tr>
        <td style="text-align: center; vertaical-align: center">
            我是垂直居中的!
        </td>
    </tr>
</table>

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

.something-semantic {
    display: table;
    width: 100%;
}
.something-else-semantic {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

行内块法

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

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

这是一种比较 hack 的方法。

.block {
  text-align: center;
  white-space: nowrap;
}
 
/* 将高度撑到100% */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* 要被垂直居中的元素,可以是任意宽高 */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

基于 Flexbox 的解决方案

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

  • 如果元素容器没有足够的空间,我们无需计算每个元素的宽度,就可以设置他们在同一行;
  • 可以快速让他们布局在一列;
  • 可以方便让他们对齐容器的左、右、中间等;
  • 无需修改结构就可以改变他们的显示顺序;
  • 如果元素容器设置百分比和视窗大小改变,不用提心未指定元素的确切宽度而破坏布局,因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

无疑是最佳的解决方案。因为 Flexbox 就是专门针对这类需求设计的😄

body{
    display: flex;
    min-height: 100vh;
    margin: 0;
}
main{
    margin: auto;
}

当居中元素内部文本也需要居中时:

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

参考:

  • 《 CSS 揭秘》
  • http://css-tricks.com/centering-in-the-unknown
  • CSS 变形: http://w3.org/TR/css-transforms
  • CSS 值与单位:http://w3.org/TR/css-values
  • CSS 伸缩盒模型布局:http://w3.org/TR/css-flexbox

相关文章

  • 23种CSS垂直居中技巧

    本文给大家分享23中css垂直居中的处理方法,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-08-27
  • 浅谈最全面的水平垂直居中方案与flexbox布局

    这篇文章主要介绍了浅谈最全面的水平垂直居中方案与flexbox布局 的相关资料,主要介绍了定长定宽或不定长宽的各类容器的垂直居中以及flexbox,非常具有实用价值,需要的朋
    2018-08-20
  • CSS水平垂直居中解决方案(6种)

    这篇文章主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-10
  • CSS 垂直水平居中的5种最佳解决方案

    本文给大家分享CSS 垂直水平居中的5种最佳解决方案以及各自的优缺点,本文给大家介绍的非常详细,具有参考借鉴价值,需要的朋友参考下吧
    2018-01-11
  • 详解HTML5中垂直上下居中的解决方案

    本篇文章主要介绍了详解HTML5中垂直上下居中的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-20
  • 利用css设置元素垂直居中的解决方法汇总

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼,下面这篇文章主要给大家汇总介绍了关于
    2017-09-12
  • CSS实现垂直居中的4种思路详解

    这篇文章给大家整理四种css实现垂直居中效果,思路明了非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-06
  • css实现元素水平垂直居中常见的两种方式实例详解

    这篇文章主要给大家介绍了css实现元素水平垂直居中的两种方式,文中给出了完整的示例代码供大家参考学习,对大家的学习或者工作具有一定的参考价值,有需要的朋友们下面来
    2017-04-23
  • 不定宽高的文字在div中垂直居中实现方法

    下面小编就为大家带来一篇不定宽高的文字在div中垂直居中实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-30
  • 绝对定位元素的水平垂直居中的方法(3种任选)

    本文主要介绍了绝对定位元素的水平垂直居中的方法,有3种方法可供参考,需要的朋友一起来看下吧
    2016-12-23

最新评论