Home > Article > Web Front-end > Solution to CSS vertical centering

Solution to CSS vertical centering

巴扎黑Original: 2017-08-09 15:56:531518browse

Horizontally centering an element in CSS is very simple: if it's an inline element, apply text-align: center to its parent element; if it's a block-level element, Just apply margin: auto to itself. However, if you want to vertically center an element, it can be nerve-wracking just thinking about it.

Over the years, vertical centering has become the Holy Grail of CSS and a running joke in front-end development circles. The reason is that it has the following characteristics at the same time:

1) It is an extremely common requirement.

2) In theory, it seems extremely simple.

## It's often difficult to do, especially when it comes to elements with non-fixed dimensions.

Next we will explain the simple use of these three methods in detail.

1. Code initialization

Based on the following HTML code, we vertically center the div element with id='content' in the div with id='box'.

<body>
<div id="box">
    <div id="content">这是要居中的元素</div>
</div>
</body>

The basic style is as follows:

#box{
     margin:0;
     padding:0;
     width:500px;
     height:500px;
     background: #4AC291;
     font-size:100%;
     position: relative;
}
#content{
     background: #655;
     color: white;
     text-align: center;
     line-height: 2em;
}

二、基于绝对定位的解决方法

如果我们想要利用绝对定位的方法进行垂直剧中的话，那么就要求元素具有固定的宽度和高度，如果没有固定的宽度和高度就无法实现，因为需要利用top和left的值，进行定位。

        #box{
            margin:0;
            padding:0;
            width:500px;
            height:500px;
            background: #4AC291;
            font-size:100%;
            position: relative;    //必须的，因为下面的div要根据这个进行定位
        }
        #content{
            background: #655;
            color: white;
            text-align: center;
            line-height: 2em;
            position: absolute;   //设置绝对定位
            top:50%;
            left:50%;
            width:12em;
            height:2em;
            margin-top:-1em;    //    2/2=1
            margin-left:-6em;   //    12/2=6
      }

如上图所示，是固定宽高的样式效果。

　　这段代码在本质上做了这样几件事情：先把这个元素的左上角放置在视口(或最近的、具有定位属性的祖先元素)的正中心，然后再利用负外边距把它向左、向上移动(移动距离相当于它自身宽高的一半)，从而把元素的正中心放置在视口的正中心。借助强大的 calc() 函数，这段代码还可以省掉两行声明：

        #box{
            margin:0;
            padding:0;
            width:500px;
            height:500px;
            background: #4AC291;
            font-size:100%;
            position: relative;
        }
        #content{
            background: #655;
            color: white;
            text-align: center;
            line-height: 2em;
          /*position: absolute;
            top:50%;
            left:50%;
            width:12em;
            height:2em;
            margin-top:-1em;
            margin-left:-6em;*/
            position: absolute;
            width: 12em;
            height: 2em;
            top: calc(50% - 1em);
            left: calc(50% - 6em);
      }

这个方法最大的局限在于它要求元素的宽高是固定的。在通常情况下，对那些需要居中的元素来说，其尺寸往往是由其内容来决定的。如果能找到一个属性的百分比值以元素自身的宽高作为解析基准，那我们的难题就迎刃而解了!遗憾的是，对于绝大多数CSS属性(包括 margin)来说，百分比都是以其父元素的尺寸为基准进行解析的。

三、基于视口单位的解决方法

　假设我们不想使用绝对定位，仍然可以采用translate()技巧来把这个元素以其自身宽高的一半为距离进行移动;但是在缺少left和top的情况下，如何把这个元素的左上角放置的容器的正中心呢?

　我们的第一反应很可能是用margin属性的百分比值来实现，就像这样：

#content {
  width: 12em;
  margin: 50% auto 0;
  transform: translateY(-50%);
}

　　这段代码产生的效果十分离谱。原因在于margin的百分比值时以父元素的宽度作为解析基准的。没错，即使对于margin-top和margin-bottom来说也是这样!

　　不过幸运的是，如果只是想把元素相对于视口进行居中，仍然是有希望的。CSS值与单位(第三版)定义了一套新的单位，称为视口相关的长度单位。

1) vw 是与视口宽度相关的。与常人的直觉不符的是，1vw 实际上表示视口宽度的 1%，而不是 100%。

2) 与 vw 类似，1vh 表示视口高度的 1%。

3) 当视口宽度小于高度时，1vmin 等于 1vw，否则等于 1vh。

4) 当视口宽度大于高度时，1vmax 等于 1vw，否则等于 1vh。

四、Flexbox方法（本文主要说明的方法）

Flexbox(伸缩盒)是专门针对这类需求所设计的。我们之所以要讨论其他方案，仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。其实目前现代浏览器对 Flexbox 的支持度已经相当不错了。

　　我们只需写两行声明即可：先给这个待居中元素的父元素设置 display: flex(在这个例子中是元素)，再给这个元素自身设置我们再熟悉不过的margin: auto。

       #box{
            display: flex;
            min-height:50vh;
            margin:0;
            width:500px;
            height:500px;
            background: #4AC291;
        }
        #content{
            margin:auto;
            background: #655;
            color: white;
        }

如果浏览器不支持Flexbox，页面渲染结果看起来就跟我们的起点图是一样的了(如果设置了宽度的话)。虽然没有垂直居中效果，但也是完全可以接受的。

　　Flexbo 的另一个好处在于，它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。

The above is the detailed content of Solution to CSS vertical centering. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the definition and usage of CSS floating and positioningNext article：Introduction to the definition and usage of CSS floating and positioning

See more

Solution to CSS vertical centering

Related articles