Heim > Artikel > Web-Frontend > Lösung für die vertikale CSS-Zentrierung

Lösung für die vertikale CSS-Zentrierung

巴扎黑Original: 2017-08-09 15:56:531454Durchsuche

Das horizontale Zentrieren eines Elements in CSS ist sehr einfach: Wenn es sich um ein Inline-Element handelt, wenden Sie text-align: center auf sein übergeordnetes Element an. Wenn es sich um ein Element auf Blockebene handelt, wenden Sie einfach margin: auto an selbst. Wenn Sie jedoch ein Element vertikal zentrieren möchten, kann es nervenaufreibend sein, nur darüber nachzudenken.

Im Laufe der Jahre ist die vertikale Zentrierung zum Heiligen Gral von CSS und zu einem Laufwitz in Front-End-Entwicklungskreisen geworden. Der Grund dafür ist, dass es gleichzeitig die folgenden Eigenschaften aufweist:

1) Es handelt sich um eine äußerst häufige Anforderung.

2) Theoretisch scheint es extrem einfach zu sein.

Das ist oft schwierig, insbesondere wenn es sich um Elemente mit nicht festgelegten Abmessungen handelt.

Als nächstes erklären wir Ihnen die einfache Anwendung dieser drei Methoden im Detail.

1. Code-Initialisierung

　 Basierend auf dem folgenden HTML-Code zentrieren wir das div-Element mit id='content' vertikal im div mit id='box'.

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

Der Grundstil ist wie folgt:

#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 的另一个好处在于，它还可以将匿名容器(即没有被标签包裹的文本节点)垂直居中。

Das obige ist der detaillierte Inhalt vonLösung für die vertikale CSS-Zentrierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in die Definition und Verwendung von CSS-Floating und -PositionierungNächster Artikel：Einführung in die Definition und Verwendung von CSS-Floating und -Positionierung

In Verbindung stehende Artikel

Mehr sehen