Plusieurs méthodes de centrage CSS couramment utilisées-Questions et réponses frontales-php.cn

Plusieurs méthodes de centrage CSS couramment utilisées

PHPz

Libérer： 2023-04-21 14:29:09

original

4072 Les gens l'ont consulté

La méthode de centrage CSS est l'une des techniques les plus basiques dans la production de pages Web. Qu'il s'agisse de texte ou d'images centrés, cela peut être réalisé avec un simple code CSS. Ci-dessous, nous présenterons plusieurs méthodes de centrage CSS couramment utilisées.

1. Centrer un div

Pour centrer un div, on peut utiliser le code CSS suivant :

div {
    width: 200px;
    height: 100px;
    margin: auto;
}

Copier après la connexion

Parmi eux, les attributs width et height représentent la largeur. du div et du haut. L'attribut margin:auto peut centrer le div horizontalement et verticalement. width和height属性表示div的宽和高。margin:auto属性可以让div水平和垂直居中。

二、居中一个图片

要把一个图片居中，我们可以使用以下的CSS代码：

img {
    display: block;
    margin: auto;
}

Copier après la connexion

其中，display:block属性可以让图片自动换行，使其居中。margin:auto属性可以让图片水平和垂直居中。

三、居中一个文本框

要把一个文本框居中，我们可以使用以下的CSS代码：

input[type=text] {
    display: block;
    margin: 0 auto;
}

Copier après la connexion

其中，input[type=text]表示文本框，display:block属性可以让文本框自动换行，使其居中。margin:0 auto属性可以让文本框水平居中，垂直方向默认居中。

四、居中整个网页

要把整个网页居中，我们可以使用以下的CSS代码：

body {
    margin: 0 auto;
    text-align: center;
}

Copier après la connexion

其中，margin:0 auto属性可以让网页内容水平居中，text-align:center属性可以让网页内容垂直居中。

五、居中一个绝对定位元素

要把一个绝对定位的元素居中，我们可以使用以下的CSS代码：

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Copier après la connexion

其中，position:absolute属性可以使元素定位于父元素内，top:50%和left:50%属性可以使元素相对于父元素上下左右居中。transform:translate(-50%,-50%)

2. Centrer une image

Pour centrer une image, nous pouvons utiliser le code CSS suivant : 🎜rrreee🎜Parmi eux, l'attribut display:block peut automatiquement envelopper l'image et la centrer. L'attribut margin:auto peut centrer l'image horizontalement et verticalement. 🎜🎜3. Centrer une zone de texte🎜🎜Pour centrer une zone de texte, on peut utiliser le code CSS suivant : 🎜rrreee🎜Parmi eux, input[type=text] représente une zone de texte, L'attribut display:block permet à la zone de texte de s'enrouler automatiquement et de la centrer. L'attribut margin:0 auto peut centrer la zone de texte horizontalement et verticalement par défaut. 🎜🎜4. Centrer toute la page Web🎜🎜Pour centrer toute la page Web, nous pouvons utiliser le code CSS suivant : 🎜rrreee🎜Parmi eux, l'attribut margin:0 auto peut centrer le contenu de la page Web horizontalement, L'attribut text-align:center permet au contenu Web d'être centré verticalement. 🎜🎜5. Centrer un élément en position absolue🎜🎜Pour centrer un élément en position absolue, on peut utiliser le code CSS suivant : 🎜rrreee🎜Parmi eux, l'attribut position:absolute permet de positionner l'élément au parent Au sein d'un élément, les attributs top:50% et left:50% peuvent centrer l'élément vers le haut, le bas, la gauche et la droite par rapport à l'élément parent. L'attribut transform:translate(-50%,-50%) permet de déplacer la position de l'élément vers le coin supérieur gauche de la moitié de sa largeur et de sa hauteur, afin que l'élément soit parfaitement centré. 🎜🎜Pour résumer, les méthodes ci-dessus sont des méthodes de centrage CSS couramment utilisées, mais dans les applications réelles, la méthode de centrage correspondante doit être sélectionnée en fonction de la situation spécifique. 🎜

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!