从头开始 — CSS — 垂直居中

wuaiqiu 发布于2019-08-30 14:13 / 631人阅读

摘要：基于特有的属性拥有内联元素的特性同时可以定义宽高，我们可以设置一个行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时，不仅在水平方向上将元素居中，垂直方向上也是如此。

事实上，每次面试前端必问的问题就是这个。及其常见的需求，看起来似乎非常简单，但是实现起来很费劲，尤其是涉及尺寸不固定的元素。

本篇文章将介绍比较流行的几种方法。

行内块


    
    
        hello

 #ghost {
            display: inline-block;
            height: 20em;
            vertical-align: middle;
        }

本质上是利用了内联元素的 vertical-align 属性，通过将此属性置为middle，同一行内的内联元素都将以设置这一属性的内联元素的基线对齐。

基于inline-block特有的属性：拥有内联元素的特性同时可以定义宽高，我们可以设置一个ghost行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。

当然我们也可以将其它元素置为行内块，再设置宽度并添加text-align使其水平居中。

总结一下，此方法太过hack。

绝对定位 子元素固定宽高


        
            hello

#main {
            background-color: green;
            height: 20em;
            width: 20em;
            position: relative;
}

#child {
            position: absolute;
            background: yellow;
            top: 50%;
            left: 50%;
            height: 10em;
            width: 10em;
            margin-top: -5em;
            margin-left: -5em;
}

显然，这种方法的原理是：先利用绝对定位将这个元素的左上角放置与父元素的正中间，再利用负边距将它向左上移动它本身的一半。

如果借助calc()函数可以说明得更加清楚：

#child {
    position: absolute;
    top: calc(50%-5em);
    left: calc(50%-5em);
    height: 10em;
    width: 10em;
}

不固定宽高

实际中大多数时候我们并不知道子元素的实际宽高。

如果你属性translate()函数，你一定知道当它的参数为百分比时，它会按照元素本身的百分比值进行变换，我们可以通过这个方法彻底摆脱对尺寸的依赖！

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

看起来已经完美解决了，但是它还有以下的缺陷：

绝对定位会对整体的布局造成很强烈的影响。

如果居中的元素超过了视窗会被裁剪掉。

在某些浏览器中，元素可能会被放置在半个像素上造成模糊。

视口居中

如果我们不采用绝对定位，对子元素设置margin使其左上角置于父元素中点，再用translate重复上一种方法的操作，是否可以实现呢？

答案是不可以，因为margin的百分比是以父元素的宽度为基准的，即便是top和bottom也是！没错，很扯。

如果仅仅想要垂直于视口，我们可以采用css中相对于视口的单位 vw、vh、vmin、vmax

1vw 表示视口宽度的1%，同理1vh等于视口高度的1%

当视口宽度小于高度时，1vmin=1vw，否则1vmin=1vh，另一种情况同理。

#child {
            margin:50vh auto 0;
            transform: translateY(-50%);
}

它只能基于视口居中。

Flexbox

flex当然是未来的趋势，上面的一切都可以理解成为了照顾老旧的浏览器的猴戏（虽然translate和视口单位的兼容性也不怎么好）。


    hello

#main {
           margin: auto;
        }
 body {
            display: flex;  
        }

啊，很难受。使用flexbox时，margin：auto不仅在水平方向上将元素居中，垂直方向上也是如此。

如果你熟悉flex的话，其实还有多种实现方式。

body {
            display: flex;  
            justify-content: center;
            align-items:center;
        }

或者对子元素多带带设置交叉轴对齐方式：

body {
            display: flex;  
            justify-content: center;
        }
#main {
            align-self:center;
}

云服务器 GPU云服务器垂直居中实现垂直居中水平垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115859.html

从头开始 — CSS — 垂直居中

摘要：基于特有的属性拥有内联元素的特性同时可以定义宽高，我们可以设置一个行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。如果居中的元素超过了视窗会被裁剪掉。使用时，不仅在水平方向上将元素居中，垂直方向上也是如此。事实上，每次面试前端必问的问题就是这个。及其常见的需求，看起来似乎非常简单，但是实现起来很费劲，尤其是涉及尺寸不固定的元素。本篇文章将介绍比较流行的几种方法。行内块...

NoraXie 2019-08-01 18:43 评论0 收藏0
初探flex布局

摘要：一布局概述布局是一种较新盒子模型，在布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩其大小。下面我们来看用布局怎么解决这些问题。所以学会使用布局是非常有必要的。想详细了解布局请点击这里。一 flex布局 1.1 flex概述 flex布局是一种较新CSS盒子模型，在flex布局模型中，弹性容器的子元素的排布可以比较灵活，可以根据容器的大小自动扩展或收缩...

Jeffrrey 2019-08-29 12:48 评论0 收藏0
CSS水平居中和垂直居中的若干方法

摘要：居中分为水平居中和垂直居中，水平居中方式也较为常见和统一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同时实现水平和垂直居中。博客原文地址：Claiyre的个人博客 https://claiyre.github.io/如需转载，请在文章开头注明原文地址不为繁华易匠心从css入门就开始接触，无所不在的，一直备受争议的居中问题。css居中分为水平居中和垂直居中，水平居中方式也较为...

hiyayiji 2019-08-29 12:29 评论0 收藏0
20170808- css 居中

摘要：拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它注意上面的例子中必须为元素设置宽度，并且宽度必须小于父容器的宽度绝对定位实现垂直居中或者自身高度的一半水平居中行内或类行内元素水平居中在块级父容器中设置text-align:center 块级元素水平居中块级元素设置margin-left和margin-right为auto（前提是已经为元素设置了width） fl...

Dongjie_Liu 2019-08-29 13:07 评论0 收藏0