关于DIV居中的问题。

1.传统HTML CSS水平居中（不包含前端框架）

1.1:设置固定宽度的方法

关键代码描述：居中元素必须设置宽度，然后设置margin

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta>
 5     </head>
 6     <style>
 7        
 8 
 9       div{
10             width: 500px;  /*必须设置宽度，以下margin才有效*/
11             margin: 0 auto;
12             border: 1px solid;
13         }
14  </style>
15  <body>
16         <div>
17             aaaa
18         </div>
19     </body>
20 </html>

1.2：行内块设置，居中元素设置行内inline-block

关键代码描述：子元素必须设置行内显示，父元素必须设置文本居中

<!DOCTYPE html>
<html>
    <head>
        <meta>
    </head>
    <style>
        .pages2{
            text-align: center;/*父元素必须设置文本居中，子元素设置行内现实，才会居中*/
            border:  1px solid;
        }

        .pages2 div {
            display: inline-block;/*子元素必须设置*/
           border: 1px solid;
           width: 500px;
        }
    </style>
    <body>
    <div class="pages2">
        <div>
            aaaa
        </div>
    </div>
    </body>
</html>

1.3设置浮动居中

关键代码描述：父元素开启相对定位，左浮动，这个时候父元素处于水平线右侧，

　　　　　　　　这个时候，只要将子元素右侧浮动一般，刚好居中显示。

<!DOCTYPE html>
<html>
    <head>
        <meta>
    </head>
    <style>
 

        .pages2{
            border: 2px solid red;
            position: relative;/*必须开启相对定位*/
            left: 50%;/*让父元素刚好处于水平线右侧*/
            float: left;/*目的是脱离文档流，使宽度为子元素内容的高度，宽度，用于配合定位*/
        }

        .pages2 div {
            border: 1px solid;
            position: relative;/*子元素开启相对定位*/
            right: 50%;/*相对父元素，右偏移一半，刚好居中*/
            float: left;/*配合定位*/
        }
    </style>
    <body>
    <div class="pages2">
        <div>
            aaaaa
        </div>
    </div>
    </body>
</html>

1.4:设置fit-content

关键代码描述：设置父元素的fit-content 可以达到居中效果

<!DOCTYPE html>
<html>
    <head>
        <meta>
    </head>
    <style>
 
    .con{
        border: 1px solid;
        width: fit-content;/*必须设置fit-content*/
        width:-moz-fit-content;
        margin:     auto;
    }
    </style>
    <body>
<div class="con">
    <div class="pages2">
        <div>
            aaaaa
        </div>
    </div>
</div>
    </body>
</html>

1.5设置居中元素display：table,margin:0 auto;

<!DOCTYPE html>
<html>
    <head>
        <meta>
    </head>
    <style>
 

        .pages2 div{
            border: 1px solid;
            display: table; /*当前居中元素设置*/
            margin: 0 auto;/*当前居中元素设置*/
        }
    </style>
    <body>
<div class="con">
    <div class="pages2">
        <div>
            aaaaa
        </div>
    </div>
</div>
    </body>
</html>

1.6,父元素设置dispaly:flex jsutify-content:center

<!DOCTYPE html>
<html>
    <head>
        <meta>
    </head>
    <style>
 

        .con{ /*父元素设置*/
            border: 1px solid;
           display: flex;
           justify-content: center;
        }
    </style>
    <body>
<div class="con">
    <div class="pages2">
        <div>
            aaaaa
        </div>
    </div>
</div>
    </body>
</html>

1.7 父元素设置display:flex 子元素设置margin:0 auto

<!DOCTYPE html>
<html>
    <head>
        <meta>
    </head>
    <style>
 

        .con{
            border: 1px solid;
           display: flex;
         
        }

        .pages2 { 
            margin:  0 auto;
        }
    </style>
    <body>
<div class="con">
    <div class="pages2">
        <div>
            aaaaa
        </div>
    </div>
</div>
    </body>
</html>

2.div垂直居中

2.1 设置父元素的display:flex ; flex-direcion:column;justify-content:center

　　关键代码描述：一定要设置高度height

<!DOCTYPE html>
<html>
    <head>
        <meta>
    </head>
    <style>
 html,body{
     width: 100%;
     height: 100%;
 }

        .pages2 div{
            border: 1px solid;
            display: table;
            margin: 0 auto;
        }

        .con{
            height: 100%; /* 设在高度 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
    <body>
<div class="con">
    <div class="pages2">
        <div>
            aaaaa
        </div>
    </div>
</div>
    </body>
</html>

2.2 设在父元素display:table ; 子元素两个属性

<!DOCTYPE html>
<html>
    <head>
        <meta>
    </head>
    <style>
 html,body{
     width: 100%;
     height: 100%;
 }


        .con{
            height: 100%;/* 一定要设置高度*/
            display: table;
          

        }

        .pages2 {
            display: table-cell;
            vertical-align: middle;
           
        }
    </style>
    <body>
<div class="con">
    <div class="pages2">
        <div>
            aaaaa
        </div>
    </div>
</div>
    </body>
</html>

2.3 设置父元素的display:flex

<!DOCTYPE html>
<html>
    <head>
        <meta>
    </head>
    <style>



        .con{
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center
          

        }


    </style>
    <body>
<div class="con">
    <div class="pages2">
        aaa
    </div>
</div>
    </body>
</html>

2.4

<!DOCTYPE html>
<html>
    <head>
        <meta>
    </head>
    <style>



        .con{
            height: 100vh;
           display: grid;
        }

        .pages2{
            margin: auto;
        }

    </style>
    <body>
<div class="con">
    <div class="pages2">
        aaa
    </div>
</div>
    </body>
</html>