Comment utiliser CSS pour obtenir une mise en page centrée (code code)

Dans la conception Web, le centrage est une méthode de mise en page très courante. De nombreuses conceptions Web utilisent désormais une mise en page centrée pour offrir aux utilisateurs une meilleure expérience, et la mise en œuvre centrée sur CSS est également très simple et importante.

Discutons de la façon d'utiliser le code CSS pour obtenir une mise en page centrée dans le développement front-end.

Concepts de base du centrage

Avant de commencer à apprendre le code CSS centré, vous devez d'abord comprendre quelques concepts de base.

1. Centrage horizontal : La direction horizontale est l'alignement central, généralement appliqué lorsque la largeur des éléments de la page n'est pas de 100 %, comme les zones de texte, les boutons, etc.
2. Centrage vertical : la direction verticale est l'alignement central, généralement appliqué lorsque la hauteur des éléments de la page n'est pas de 100 %, comme une seule ligne de texte, des images, etc.
3. Centrage horizontal et vertical : alignement central à la fois horizontalement et verticalement.

Centrage horizontal

Il existe de nombreuses façons d'obtenir une disposition de centrage horizontal, mais l'essentiel est d'égaliser les marges gauche et droite de l'élément.

1. text-align

Il s'agit de la méthode la plus couramment utilisée, adaptée lorsque l'élément parent est un élément de niveau bloc (tel que div) et définit les attributs des éléments en ligne (tels que le texte).

父元素 {
    text-align: center;
}
子元素 {
    display: inline-block;
}

Cette méthode nécessite de définir l'élément enfant sur inline-block pour obtenir l'alignement, sinon cela ne peut être obtenu qu'en utilisant la méthode margin. inline-block，才能实现对齐方式，否则只能使用margin方法实现。

2. margin

这种方法也比较常用，适用于父元素与子元素都是块级元素，且子元素的宽度固定。通过设定左右margin为auto，使两边边距相等，从而将元素居中。

父元素 {
    width: 60%;
}
子元素 {
    width: 80%;
    margin: 0 auto;
}

注意，这种布局方式需要父元素设置宽度，否则子元素无法对齐。

3. flex

如果您的布局正在使用flexbox，那么您可以使用以下CSS代码将元素水平居中。

父元素 {
    display: flex;
    justify-content: center;
}

以上代码将在x轴方向使子元素居中。

4. grid

如果使用grid布局，可以使用以下CSS样式将元素水平对齐。

父元素 {
    display: grid;
    place-items: center;
}

place-items属性可以同时使子元素在水平和垂直方向上对齐，可以在下面的小结中看到。

垂直居中

实现垂直居中布局的方法同样有多种，这里介绍几种方法。

1. line-height

这是一种非常简单和常用的方法，适用于单行文本和图片。给父元素和子元素分别设置相同的line-height值，即可实现垂直对齐。

父元素 {
    line-height: 100px;
}
子元素 {
    line-height: 100px;
}

这里需要注意，父元素的高度必须是子元素的整数倍。

2. absolute

这种方法将子元素的position属性设为absolute，然后使用top和bottom对其进行对齐。

父元素 {
    position: relative;
    height: 200px;
}
子元素 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

这种方法适用于容器高度固定，子元素高度未知的情况下。

3. flex

这种方法需要将容器使用flexbox布局，然后使用align-items和justify-content

margin

Cette méthode est également couramment utilisée et convient lorsque l'élément parent et l'élément enfant sont tous deux des éléments de niveau bloc et que la largeur de l'élément enfant est fixé. En définissant les marges gauche et droite sur automatique, rendez les marges des deux côtés égales et centrez l'élément.

父元素 {
    display: flex;
    align-items: center;
    justify-content: center;
}

Notez que cette méthode de mise en page nécessite que l'élément parent définisse la largeur, sinon les éléments enfants ne peuvent pas être alignés.

flex
Si votre mise en page utilise flexbox, vous pouvez utiliser le code CSS suivant pour centrer l'élément horizontalement. 🎜

父元素 {
    display: flex;
    align-items: center;
    justify-content: center;
}

🎜Le code ci-dessus centrera l'élément enfant dans la direction de l'axe x. 🎜
🎜🎜grid🎜🎜🎜🎜Si vous utilisez la disposition en grille, vous pouvez utiliser les styles CSS suivants pour aligner les éléments horizontalement. 🎜rrreee🎜 L'attribut place-items peut aligner les éléments enfants à la fois horizontalement et verticalement, comme vous pouvez le voir dans le résumé ci-dessous. 🎜🎜Centrage vertical🎜🎜Il existe également de nombreuses façons de mettre en œuvre une disposition centrée verticalement. Voici quelques méthodes. 🎜🎜🎜🎜line-height🎜🎜🎜🎜Il s'agit d'une méthode très simple et courante qui fonctionne bien pour des lignes simples de texte et d'images. L'alignement vertical peut être obtenu en définissant la même valeur de hauteur de ligne pour l'élément parent et l'élément enfant. 🎜rrreee🎜Il est à noter ici que la hauteur de l'élément parent doit être un multiple entier de l'élément enfant. 🎜
🎜🎜absolute🎜🎜🎜🎜Cette méthode définit l'attribut position de l'élément enfant sur absolu, puis utilise top et bottom pour l'aligner. 🎜rrreee🎜Cette méthode convient aux cas où la hauteur du conteneur est fixe et la hauteur des éléments enfants est inconnue. 🎜
🎜🎜flex🎜🎜🎜🎜Cette méthode nécessite d'utiliser la disposition flexbox du conteneur, puis d'utiliser les éléments align-items et justify-content code> attributs Centre aligner les éléments enfants verticalement et horizontalement. 🎜rrreee🎜Le code ci-dessus centrera l'élément enfant dans la direction de l'axe y. 🎜🎜Centrage horizontal et vertical🎜🎜Si vous souhaitez aligner des éléments horizontalement et verticalement, vous pouvez combiner plus de deux méthodes pour y parvenir. 🎜🎜Le code suivant permettra d'obtenir une disposition centrée horizontalement et verticalement : 🎜rrreee🎜Le code ci-dessus centrera les éléments enfants sur les axes de coordonnées x et y. 🎜🎜Résumé🎜🎜Dans la conception frontale, réaliser une mise en page centrée est un élément très important. Espérons que cet article vous aide à mieux comprendre comment le code centré est implémenté. À l’aide de méthodes telles que l’alignement du texte, la marge, la flexion, la grille et l’absolu, les éléments peuvent être alignés et centrés dans les directions horizontale et verticale. À l'aide de ces méthodes et propriétés, vous pouvez facilement créer des pages Web avec une bonne conception d'interface utilisateur. 🎜

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!