Résumé des méthodes d'implémentation du centrage vertical et horizontal en CSS (avec code)

Ce que cet article vous apporte est un résumé des méthodes d'implémentation du centrage vertical et horizontal en CSS (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Récemment, j'ai vu de nombreuses questions d'entretien demandant : S'il vous plaît, dites-moi plusieurs façons d'utiliser le CSS pour obtenir un centrage vertical et horizontal ? En lisant les bases du CSS, j'ai vu un article qui parlait de centrage complet. Voici un résumé du contenu de l'article

1. Utiliser absolu (Absolute Centering)

1.1 Le code spécifique est le suivant :

.container {
    position: relative;
}

.absolute_center {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    margin: auto;
    padding: 20px;
    overflow: auto;
}

<div>
    <div>
        <ul>
            <li>
                该方法的核心思想是是使用绝对定位布局，使当前元素脱离正常的流体特性，而使用absolute的流体特性
            </li>
        </ul>
    </div>
</div>

1.2 L'idée centrale de cette méthode Oui :

Utiliser l'absolu pour le positionnement et la disposition, rompre avec les propriétés fluides normales des éléments de bloc et utiliser les propriétés fluides de l'absolu pour compléter le centrage vertical et horizontal .

Voici deux points de connaissances de base que vous devez connaître :

1 Propriétés des fluides :
Les éléments horizontaux de bloc, tels que les éléments div, sont. par défaut (non flottant, positionnement absolu, etc.), la direction horizontale remplira automatiquement le conteneur extérieur s'il y a margin-left/margin-right, padding-left/padding-right, border-left-width/border. -right-width etc., la zone de contenu réelle répondra au rétrécissement ;
2 Propriétés absolues du fluide :
Elle n'a pas de propriétés fluides par défaut, mais uniquement dans des conditions spécifiques, et cette condition est "positionnement dans". directions opposées en même temps" "Quand", c'est-à-dire que la gauche et la droite sont positionnées dans la direction horizontale, le haut et le bas sont positionnés dans la direction verticale, et lorsque les directions opposées ont des valeurs de positionnement​​en même temps , des caractéristiques absolues du fluide apparaissent.

1.3 Avantages et inconvénients :

Avantages :

1.Bonne compatibilité, les propriétés absolues du fluide sont compatibles avec IE7, Compatible avec tous les navigateurs modernes ;
2. Aucun élément HTML de balisage supplémentaire, style simple ;
3. L'écriture de la largeur et de la hauteur du contenu prend également en charge le pourcentage et l'écriture min/max ; pris en charge ;

Inconvénients :

1. La hauteur du contenu doit être définie

2. L'attribut overflow doit être ajouté pour empêcher le contenu d'apparaître si la hauteur du texte dépasse la hauteur ; conteneur extérieur. situation de débordement ;

deux

, marges négatives

C'est peut-être la méthode la plus couramment utilisée à l'heure actuelle, lorsque la hauteur et la largeur de l'élément sont lors de la fixation. la valeur, définissez l'élément sur une disposition relative pour sortir du flux de documents, définissez top: 50%; left: 50%; et utilisez margin-left et margin-top pour centrer complètement l'élément.

2.1 Le code spécifique est le suivant :

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Negative {
    position: absolute;
    width: 300px;
    height: 200px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -170px;
    margin-top: -120px;
    background-color: cornsilk;
}

<div>
    <div>
    </div>
</div>

2.2 Cette méthode L'idée principale est la suivante : Utilisez la disposition relative, utilisez top et left pour placer le contenu au centre du conteneur, puis utilisez la marge pour contrôler le décalage.

Il y a une note ici :

Lors de l'utilisation de l'attribut box-sizing:border-box, le décalage n'a pas besoin de calculer la bordure et le remplissage.

2.3 Avantages et inconvénients :

Avantages :

1. Bonne compatibilité, y compris IE6-IE7

2. Marquer les éléments html, moins de code ;

Inconvénients :

1 Non réactif, ne peut pas être utilisé avec le pourcentage et min-/max- ; 2. Pour éviter le débordement si la hauteur du texte du contenu dépasse le conteneur externe ;

3. Lorsque l'élément utilise box-sizing:border-box et utilise le décalage de la zone de contenu par défaut, il est différent et doit être recalculé ;

3. Utiliser les transformations

3.1 Le code spécifique est le suivant :

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: aliceblue;
}

.is-Transformed { 
    width: 50%;
    margin: auto;
    position: absolute;
    top: 50%; 
    left: 50%;
    padding: 20px;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    background-color: darkseagreen;
}

<div>
    <div>
        <ul>
            <li>
                该方法的核心思想是使用相对布局，并使用top以及left使内容置于容器中心部位，再使用translate来控制偏移量
            </li>
        </ul>
    </div>
</div>

3.2 L'idée centrale de cette méthode est la suivante :

Utilisez une disposition relative et utilisez haut et gauche pour placer le contenu dans le centre du conteneur, puis utilisez transform pour contrôler le décalage.

3.3 Avantages et inconvénients :

Avantages :

1. La largeur et la hauteur du contenu sont adaptatives, et la largeur et la hauteur de le contenu n'a pas besoin d'être spécifié. ;

2. Petite quantité de code

Inconvénients :

1. La compatibilité est un peu mauvaise puisque la transformation n'est pas compatible avec IE8. ne prend en charge que les navigateurs modernes IE9 et supérieurs ;

2 Afin d'être compatible avec divers navigateurs, certains préfixes CSS supplémentaires sont nécessaires

3. Si l'élément utilise l'attribut transform, cela peut affecter d'autres effets de transformation ; 🎜>4. Parfois, les bords seront flous. Dans le cas de C'est peut-être la meilleure solution de centrage vertical, mais il y a un plus gros problème. Pour utiliser table-cell pour compléter l'effet de centrage vertical, 3 éléments. sont nécessaires pour compléter.


4.1 Le code spécifique est le suivant :

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Table { 
  display: table; 
}

.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}

.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
  padding: 20px;
  background-color: deepskyblue;
}

<div>
    <div>
        <div>
            使用table-cell完成垂直水平居中
        </div>
    </div>
</div>

@import "./absolute_center4.png"{width="50%"}

4.2 该方法的核心思想是：

使用表格来实现垂直居中，再使用margin: 0 auto;来实现水平居中。

具体操作步骤如下：

1.设置父元素为块级表格；
2.设置子元素为表格单元格；
3.给子元素添加vertical-align:middle属性,此单元格已实现垂直居中；
4.设置子元素中的内容的宽度，添加margin: 0 auto;属性，使子元素水平居中。

4.3 优缺点：

优点：

1.内容高度自适应；
2.如果子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE8；

缺点：

1.完成一个垂直居中效果，需要3个html元素；

五、使用Inline-block

这也是一种常用的垂直水平居中的方法，但会存在一个问题：当内容的宽度大于容器宽度-0.25em的时候，会发生内容上移到顶部的方法，所以需要一些小的技巧来避免这样的问题。

5.1 具体代码如下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Inline { 
  text-align: center;
  overflow: auto;
}

.container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}

.container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}

.is-Inline .Center-Block {
  background-color: greenyellow;
  padding: 20px;
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

<div>
    <div>
        使用inline-block完成水平垂直居中
    </div>
</div>

5.2 该方法的核心思想是：

和table有点类似，设置内容为inline-block块，设置vertical-align: middle;属性使元素垂直方向居中，再父容器设置text-align:center;使子元素水平方向居中；

5.3 优缺点：

优：

1、内容高度自适应；
2.如果子元素的内容溢出，会拉伸父元素的高度；
3.兼容性好，兼容到IE7；

缺：

1.依赖margin-left：-0.25em来矫正水平方向居中的误差；
2.内容的宽度必须小于容器的宽度减去0.25em。

六、使用Flexbox

弹性布局是当前移动端比较流行的布局方式，它可以很优雅的完成垂直水平居中效果。

6.1 具体代码如下：

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: aliceblue;
}

.container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
      -moz-box-align: center;
      -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.center_block {
  background-color: wheat;
  padding: 20px;
}

<div>
  <div>
    使用flexbox完成水平垂直居中
  </div>
</div>

6.2 该方法的核心思想是：

使用弹性布局，align-items: center;使元素在侧轴方向居中（默认是垂直方向），justify-content: center;使元素在主轴方向居中（默认是水平方向）;

6.3 优缺点：

优：

1.内容宽度、高度自适应,即便文本溢出也很优雅；
2.可以使用很多弹性布局的新特性；

缺：

1.兼容性比较差，目前只有IE10以上兼容；
2.需要写额外的兼容性前缀；
3.各个浏览器的表现可能会有一些差异；

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!