关于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:设置width:fit-content

关键代码描述：设置父元素的width: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

关于DIV居中的问题。

猜你喜欢