Häufige Diskussionen zur CSS-Zentrierung

Beginnen wir mit einem allgemeinen Fall, dem Zentrieren eines Bilds und des folgenden Textes:

Verarbeiten Sie zunächst die linke und rechte Zentrierung, wenn man bedenkt, dass img ein Inline-Bild ist Element, der Textinhalt unten ist ebenfalls ein Inline-Element, also verwenden Sie einfach text-align:

<style>
    .container{
        text-align: center;
    }</style><p>
    <img  alt="Häufige Diskussionen zur CSS-Zentrierung" >
    </p><p>火星</p>

Der tatsächliche Effekt ist wie folgt:

Mars

Das Problem dabei ist, dass das Festlegen eines text-align-Attributs direkt am äußersten Container dazu führt, dass alle untergeordneten Elemente es erben . Vorausgesetzt, es gibt eine Textbeschreibung unter dem Bildtitel, dann wird die Textbeschreibung wie folgt zentriert:

Mars

Mars ist die Sonne System Einer der acht Planeten, das astronomische Symbol ist ♂

Aber tatsächlich möchten wir, dass die Textbeschreibung linksbündig ist, also müssen wir der Textbeschreibung ein text-align:left-Attribut hinzufügen , die Attribute des übergeordneten Elements zu überschreiben, und wenn es mehr untergeordnete Elemente gibt, die dies ebenfalls tun müssen, ist das Überschreiben des Attributs selbst eine schlechte Idee, daher werden hier andere Methoden verwendet. Da sich das angezeigte Bild ändert und Breite und Höhe variabel sind, werden Breite und Höhe im Allgemeinen explizit für das Bild festgelegt. Wenn Sie die Breite kennen, können Sie die Methode margin:0 auto verwenden. Stellen Sie die Werte für den linken und rechten Rand auf automatisch ein. Der Browser stellt die Werte für den linken und rechten Rand automatisch auf die Hälfte der verbleibenden Breite ein Container:

Mars

Mars ist einer der acht Planeten im Sonnensystem. Das astronomische Symbol ist ♂

Der Code lautet wie folgt:

<style>
    figure{
        width: 100px;
        margin: 0 auto;
    }
    figcaption{
        text-align: center;
    }</style>
    <p>
        <figure>
            <img  alt="Häufige Diskussionen zur CSS-Zentrierung" >
            <figcaption>火星</figcaption>
        </figure>
        </p><p>火星（Mars）是太阳系八大行星之一，天文符号是♂</p>
    

Es ist zu beachten, dass diese Methode nicht für die Zentrierung oben und unten gilt.

Use margin: 0 auto kann als die gebräuchlichste Links- und Rechtszentrierungsmethode bezeichnet werden, die nicht nur für Blockelemente, sondern auch für Inline-Elemente geeignet ist. Das Layout vieler Webseiten besteht darin, dass der Hauptinhalt eine feste Breite hat und in der Mitte angezeigt wird:

Betrachtet man den Stil der äußersten Seite Container, Sie können sehen, dass margin: 0 verwendet wird auto:

Als nächstes werden wir die vertikale Zentrierung besprechen. Das Problem ist die vertikale Zentrierung. Es gibt jedoch eine allgemeinere Methode zur vertikalen Zentrierung, nämlich die Verwendung der vertikalen Zentrierung von Tabellenzellen. Die Methode besteht darin, dem übergeordneten Container die folgenden Attribute hinzuzufügen:

.container{ 
    display: table-cell;
    vertical-align: middle;
}

Der Effekt ist wie folgt:

Mars

Der Nachteil der Verwendung von table-cell besteht darin, dass das magin-Attribut des Containers ungültig ist, da dies bei margin der Fall ist gilt nicht für das Tabellenlayout. Wenn Sie also den Container zentrieren möchten, funktioniert die Verwendung von margin: 0 auto nicht. Die Lösung besteht darin, der äußeren Schicht des Containers einen weiteren Container hinzuzufügen und den Container dann als Blockrand anzuzeigen: 0 automatisch.

Ein weiterer Nachteil besteht darin, dass das Festlegen der Breite und Höhe des Tabellenzellenelements auf einen Prozentsatz nicht funktioniert. Ein häufiges Szenario besteht darin, die Breite auf 100 % der Breite des äußeren Containers festzulegen Um den Container zu ändern, stellen Sie die Breite auf einen großen Wert ein, z. B. 3000 Pixel, um 100 % zu erreichen. Ein weiteres Problem besteht darin, dass es nicht mit IE6/7 kompatibel ist, die Produktionsumgebung jedoch grundsätzlich nicht mit IE6/7 kompatibel sein muss.

Diese Methode schlägt möglicherweise fehl, wenn der Container die Position auf „absolut“ setzen muss. Denn die Einstellung position: absolute führt dazu, dass die Anzeige des (nicht flexiblen) Elements blockiert wird. Die Lösung besteht darin, das oben Gesagte zu imitieren, der äußeren Ebene einen weiteren Container hinzuzufügen und auf diesen Container „absolut“ anzuwenden. Der Nebeneffekt besteht darin, dass das Festlegen der Höhe und Breite des inneren Containers auf Prozentsätze fehlschlägt (es sei denn, seine Position ist ebenfalls auf „absolut“ festgelegt). ). Aus diesem Grund gibt es eine Situation, in der die Anzeige nicht verwendet werden kann: vertikale Tabellenzellenzentrierung.

      这种场景就是需要在页面弹个框，这个框的位置需要在当前屏幕左右上下居中:

      通常需要将这个框的positiion设置成absolute，这个时候table-cell就不能发挥作用了，即使你在外面再套多两层，最外层为absolute，里层为table-cell，但由于里层无法设置height为外层的100%，也就是说高度无法刚好占满整个屏幕，所以不能起作用。

      解决办法是使用relative定位，设置top为50%，再设置margin-top为元素高度的负的一半。一开始设置top 50%，将弹框的起始位置放到页面中间，然后再设置margin-top为弹框高度的一半取负，这样使得弹框在页面中间位置再往上移一半自身的高度，这样就刚好在正中间了，左右居中也可类似处理：

<style> 
    .mask{
        position: absolute; width: 100%; height: 100%;
    }
   .outer{
        position: relative;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
    .container{
        width: 200px;
        height: 200px;
        display: table-cell;
        vertical-align: middle;
    }</style><p>
    </p><p>
        </p><p>

        </p>
    

效果如下：

火星

       这种办法的缺点是需要知道高度，无法根据内容长短自适应。所以就有了transform的方法，将margin-top一个具体的负值改成transform: translate(0, -50%)，由于translate里面的面百分比是根据元素本身的高度计算的，于是就可以达到自适应的效果。将上面outer样式改为：

   .outer{
        position: relative;
        top: 50%;
        left: 50%;
width: 200px;
        transform: translate(-50%, -50%);
    }

      这个办法十分地方便，为了提高兼容性，需要添加-ms-和-webkit-前缀，缺点是IE8不支持。

      上面的两种办法：margin-top一个负值和translate -50%都有一个潜在的弊端， 就是如果设置left为50%是借助position为absolute的话，可能会导致换行：

<style>
    .container{
        position: relative;
    }
     .nav{
        position:absolute;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 0;
     }</style><p>
    <figure>    
        <img  alt="Häufige Diskussionen zur CSS-Zentrierung" >
    </figure>   
    </p><p><span>地形</span><span>气候</span><span>运动</span></p> 

      效果如下：

地形气候运动

 

      可以看到，本来应该在一行显示的p元素却换行了，这是因为在一个relative元素里面absolute定位的子元素会尽可能地不超过容器的边界，通过把行内元素换行的方式。由于设置left为50%，导致p元素超了边界，所以就换行了，即使再translate -50%但已经晚了。即使是交换下两者的位置也是一样的效果，看得出浏览器执行的顺序始终是以absolute的定位优先。所以这种方法还是有不适合的场景，主要是用于左右居中定位为absolute的的情况。

      另外一个CSS3居中的办法是使用flex布局，flex布局居中十分容易和方便，只需要在父容器添加三行代码，例如上面的居中情况，可将.nav的样式改为：

    .nav{
        position:absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

      效果如下：

地形气候运动

       flex布局在自适应领域的功能真的是非常强大，不过IE的兼容性不好，所以说可能的话，不要太去照顾IE了。

 

      上面讨论的都是一些复合元素的居中，接下来分析单纯的行内元素的垂直居中。

      主要是要借助vertical-align: middle。如下，有一张图片和文字：

    <p>
        <img  alt="Häufige Diskussionen zur CSS-Zentrierung" >
        <span>photo</span>
    </p>

      如果不做任何处理，那么默认的垂直居中是以baseline为基准：

photo

      为了让它们能够垂直居中，需要改变它们的居中方式：

        .container img,
        .container span{
            vertical-align: middle;
        }

      注意每个元素都需要设置，效果：

photo

       如果container的高度比图片还要高：

photo

 

      为了让中间的内容能够在container里上下居中，可以设置文字的line-height为container的高度，那么文字就上下居中了，由于照片是和文字是垂直居中的，所以照片在container里也上下居中了，代码：

        .container span{
            vertical-align: middle;
            line-height: 150px;
        }

      效果：

photo

       这也就给了一个启示，如果需要垂直居中一个p里的比p高度小的照片，可以添加一个元素，让它的line-height等于p的高度，如下：

<style>
        .container{
            width: 150px;
            height: 150px;
            text-align: center;
        }
       .container img{
            vertical-align: middle;
        }
        .container:before{
            content: "";
            vertical-align: middle; 
            line-height: 150px;
        }</style><p>
        <img  alt="Häufige Diskussionen zur CSS-Zentrierung" ></p>

      或者是弄一个inline-block的元素，设置height为100%，这种的兼容性更好：

        .container:before{
            content: "";
            display: inline-block;
            vertical-align: middle; 
            height: 100%;
        }

     上下居中效果：

 

       还有另外一种方法借助absolute定位和margin: auto：

        .container{
            position: relative;
        }
       
        .container img{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

      这个方法的神奇之处在于最后的margin: auto，这种方法也适用于p，但是需要给p显式指定一个height，不然p的height会达到外层容器的100%。

      如果图片比container大，这种方法就不适用了。因为有一种比较常见的场景是：照片有一边和container一样高，另外一边按照片的比例缩放，照片居中显示，超出的截断，这种应该叫“占满”（occupy）布局。这种情况，只需要把left/right/top/bottom/设成一个很大的负值即可：

        .container img{
            position: absolute;
            left: -9999px;
            top: -9999px;
            right: -9999px;
            bottom: -9999px;
            margin: auto;
        }
        .container{
            overflow: hidden;
        }

      效果：

      综合上面的讨论，左右居中常用text-align和margin: 0 auto，上下居中一种办法是借助table-cell，另外一种是设置top: 50%和margin-top/translate(0, -50%)结合的办法，还有就是使用flex布局，对于行内元素设置vertical-align: middle，同时借助一个高度为100%的元素达到垂直居中的效果。最后是position: absolute和margin: auto结合使用的办法。可以说没有一个方法可以100%适用，可以根据不同的情况合理结合使用。

      如果上文有不妥的地方，或者读者有其它的居中方式，还请指出

更多Häufige Diskussionen zur CSS-Zentrierung相关文章请关注PHP中文网！