CSS垂直居中的三种方式

在说垂直居中之前先看一下水平居中,相对于垂直居中来说水平居中就简单多了:

       如果是一个行内元素,就对它的父级直接使用text-align: center;

       如果是一个块级元素,就对它自身使用margin: auto;

说完水平居中再来看垂直居中,这里讲述三种常见的方法:

1.基于绝对定位(要求元素具有固定的宽度和高度)

CSS垂直居中的三种方式_第1张图片

借助calc()函数,可以简化以上代码:

CSS垂直居中的三种方式_第2张图片

这个方法最大的局限在于它要求元素的宽高是固定的。

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

CSS垂直居中的三种方式_第3张图片

2.基于viewport

不使用绝对定位,仍然采用translate()变形函数,把元素相对于视口进行居中。先来了解一下几个相关单位

vh:相对于视口的高度。视口被均分为100单位的vh

vw:相对于视口的宽度。视口被均分为100单位的vw

vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax

CSS垂直居中的三种方式_第4张图片

只适用于在视口中居中的场景

3.基于Flexbox

这是最佳方案

我们只需要给出两句声明即可:

先给父元素设置diaplay:flex;

再给元素自身设置magin:auto;

CSS垂直居中的三种方式_第5张图片

你可能感兴趣的:(CSS3)