How to center display css div-CSS Tutorial-php.cn

How to center display css div

coldplay.xixi

Release： 2023-01-03 09:29:18

Original

52577 people have browsed it

Css div center display method: 1. Use absolute absolute positioning, the code is [
absolute center positioning]; 2. Use translate positioning; 3. Use margin to center positioning; 4. Use Fixed centered positioning.

How to center display css div

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

Css div center display method:

1. Absolute absolute positioning This is our most commonly used center positioning writing method. It requires that the width and height of the div must be determined. Currently on the market Browsers on the Internet basically support this writing method

<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>

Copy after login

2. Translate positioning This is the attribute of css3 transform that is positioned through its own offset, and it has a great advantage that it does not need to know the width and height of the div. Just like this self in js, you can set the width and height as a percentage. IE browser

<!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>

Copy after login

3. Margin is centered. There is no need to determine the width and height of the div to allow top and bottom. , left and right are both 0 and add margin:auto. A stroke of genius IE browser< IE 8 does not support

<!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>

Copy after login

4. Fixed center positioning is probably most commonly used to center the navigation bar. The display does not scroll with the 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>

Copy after login

Recommended related tutorials: CSS video tutorial

The above is the detailed content of How to center display css div. For more information, please follow other related articles on the PHP Chinese website!