Discussions courantes sur le centrage CSS

Commençons par un cas courant, centrant une image et le texte ci-dessous :

, le contenu du texte ci-dessous est également un élément en ligne, utilisez donc simplement text-align :

L'effet réel est le suivant :

<style>
    .container{
        text-align: center;
    }</style><p>
    <img  src="/static/imghw/default1.png" data-src="Mars.png" class="lazy" alt="Discussions courantes sur le centrage CSS" >
    </p><p>火星</p>

Mars

Le problème avec cela, la définition d'un attribut text-align directement sur le conteneur le plus externe fera en hériter tous les éléments enfants. En supposant qu'il y ait une description textuelle sous le titre de l'image, alors la description textuelle sera également centrée, comme suit :

Mars

Mars est le système solaire Une des huit planètes, le symbole astronomique est ♂

Mais en fait, nous voulons la description textuelle pour être aligné à gauche, nous devons donc ajouter un attribut text-align:left à la description du texte, en remplaçant les attributs de l'élément parent, et s'il y a plus d'éléments enfants qui doivent également le faire, en remplaçant l'attribut lui-même. est une mauvaise idée, donc d'autres méthodes sont utilisées ici. Étant donné que l'image affichée change et que la largeur et la hauteur sont variables, une largeur et une hauteur sont généralement définies explicitement pour l'image. Si vous connaissez la largeur, vous pouvez utiliser la méthode margin: 0 auto. Définissez les valeurs des marges gauche et droite sur auto, et le navigateur définira automatiquement les valeurs des marges gauche et droite sur la moitié de la largeur restante du. conteneur :

Mars

Mars est l'une des huit planètes du système solaire. Le symbole astronomique est ♂.

Le code est le suivant :

Il est à noter que cette méthode ne s'applique pas au centrage haut et bas.

<style>
    figure{
        width: 100px;
        margin: 0 auto;
    }
    figcaption{
        text-align: center;
    }</style>
    <p>
        <figure>
            <img  src="/static/imghw/default1.png" data-src="Mars.png" class="lazy" alt="Discussions courantes sur le centrage CSS" >
            <figcaption>火星</figcaption>
        </figure>
        </p><p>火星（Mars）是太阳系八大行星之一，天文符号是♂</p>
    

Utiliser margin : 0 auto peut être considéré comme la méthode de centrage gauche et droite la plus courante, adaptée non seulement aux éléments de bloc mais également aux éléments en ligne. La disposition de nombreuses pages Web fait que le contenu principal a une largeur fixe et est affiché au centre. Par exemple, version PC de Taobao :

En regardant le style du. conteneur le plus à l'extérieur, vous pouvez voir que la marge est utilisée : 0 auto:

Ensuite, nous discuterons du centrage vertical. Le problème est le centrage vertical. Cependant, il existe une méthode plus générale pour le centrage vertical, qui consiste à utiliser le centrage vertical d'une cellule de tableau. La méthode consiste à ajouter les attributs suivants au conteneur parent :

L'effet est le suivant :

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

Mars

L'inconvénient de l'utilisation de table-cell est que l'attribut magin du conteneur n'est pas valide car la marge le fait ne s'applique pas à la disposition des tables. Donc, si vous souhaitez centrer le conteneur, utiliser margin: 0 auto ne fonctionnera pas. La solution consiste à ajouter un autre conteneur à la couche externe du conteneur, puis à laisser le conteneur s'afficher sous forme de marge de bloc : 0 auto.

Un autre inconvénient est que définir la largeur et la hauteur de l'élément table-cell sur un pourcentage ne fonctionnera pas. Un scénario courant consiste à définir la largeur à 100 % de la largeur du conteneur extérieur. pour changer le conteneur Définissez la largeur sur une valeur élevée, telle que 3 000 px, pour atteindre 100 %. Un autre problème est qu'il n'est pas compatible avec IE6/7, mais désormais l'environnement de production n'a fondamentalement pas besoin d'être compatible avec IE6/7.

Cette méthode peut échouer lorsque le conteneur doit définir la position sur absolue. Parce que définir position: Absolute forcera l'affichage de l'élément (non flexible) à se bloquer. La solution consiste à imiter ce qui précède, à ajouter un autre conteneur à la couche externe et à appliquer l'absolu à ce conteneur. L'effet secondaire est que la définition de la hauteur et de la largeur du conteneur interne sur des pourcentages échouera (à moins que sa position ne soit également définie sur absolue). ). Pour cette raison, il existe une situation où l'affichage ne peut pas être utilisé : le centrage vertical des cellules du tableau.

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

      通常需要将这个框的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  src="/static/imghw/default1.png" data-src="Mars.png" class="lazy" alt="Discussions courantes sur le centrage CSS" >
    </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  src="/static/imghw/default1.png" data-src="Mars.png" class="lazy" alt="Discussions courantes sur le centrage CSS" >
        <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  src="/static/imghw/default1.png" data-src="Mars.png" class="lazy" alt="Discussions courantes sur le centrage CSS" ></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%适用，可以根据不同的情况合理结合使用。

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

更多Discussions courantes sur le centrage CSS相关文章请关注PHP中文网！