Comment centrer l'affichage CSS Div-tutoriel CSS-php.cn

Comment centrer l'affichage CSS Div

coldplay.xixi

Libérer： 2023-01-03 09:29:18

original

52607 Les gens l'ont consulté

Comment centrer l'affichage CSS Div : 1. Utilisez le positionnement absolu, le code est [
Positionnement central absolu] ; 2. Utilisez le positionnement par translation ; 3. Utilisez la marge pour centrer le positionnement ; . Utilisez le positionnement centré fixe.

Comment centrer l'affichage CSS Div

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Méthode d'affichage du centre div CSS :

1. Positionnement absolu absolu Il s'agit de notre méthode d'écriture de positionnement central la plus couramment utilisée. Elle nécessite la largeur et la hauteur du div. doit être déterminé. Actuellement sur le marché Les navigateurs sur Internet supportent essentiellement cette méthode d'écriture

<html>
    <head>
        <meta charset="UTF-8">
        <title>absolute居中定位</title>
        <style>
          *{margin:0;padding:0}
          .absoluteCenter{ width:600px; height:400px;position:absolute; background: rgb(50,183,97); left:50%; top:50%; margin-left: -300px; margin-top: -200px;  }
        </style>
    </head>
    <body>
        <div>我是absolute居中定位</div>
    </body>
    </html>

Copier après la connexion

2. Traduire le positionnement C'est l'attribut de la transformation CSS3 qui se positionne via son propre décalage, et il présente un grand avantage. qu'il n'a pas besoin de connaître la largeur et la hauteur du div. Tout comme ce self dans js, vous pouvez définir la largeur et la hauteur en pourcentage. Le navigateur IE

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>translate居中定位</title>
        <style>
        　　*{margin:0;padding:0}
        　　.translateCenter{ width: 40%; height: 20%; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); background: #2d2d2d;}
        </style>
    </head>
    <body>
        <div>我是translate居中定位</div>
    </body>
    </html>

Copier après la connexion

3. La marge est centrée. Il n'est pas nécessaire de déterminer la largeur et la hauteur du div pour permettre que le haut et le bas soient tous deux 0, ajoutez margin:auto, un coup de génie du navigateur IE 8. ne prend pas en charge

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>margin居中定位</title>
        <style>
        　　*{margin:0;padding:0}
       　　 .marginCenter{ width:200px; height: 200px; position: absolute;left:0; top:0; right:0; bottom: 0; margin: auto; background: #f2056e;}
        </style>
    </head>
    <body>
        <div>我是margin居中定位</div>
    </body>
    </html>

Copier après la connexion

4. Positionnement central fixe Ceci peut être le plus couramment utilisé pour centrer la barre de navigation. L'affichage ne défile pas avec la page

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>fixed居中定位</title>
        <style>
        *{margin:0;padding:0}
        .fixedCenter{max-width:980px; height:70px; position:fixed; margin:0 auto; left:0; right:0; background:rgb(67,163,244);}
        </style>
    </head>
    <body>
        <div>我是fixed居中定位</div>
    </body>
    </html>

Copier après la connexion