DIV centered on the issue.

1. Traditional HTML CSS horizontal center (the front end of the frame is not included)

1.1: The method of setting a fixed width

Key Code Description: width centrally element must be set, then set the margin

. 1  <! DOCTYPE HTML > 
2  < HTML > 
. 3      < head > 
. 4          < Meta > 
. 5      </ head > 
. 6      < style > 
. 7         
. 8  
. 9        div { 
10              width : 500px ;   // width must be set, the following margin is valid
 . 11              margin : Auto 0 ; 
12 is              border : 1px Solid ; 
13 is          } 
14   </ style >
15  <body>
16         <div>
17             aaaa
18         </div>
19     </body>
20 </html>

1.2: row within the block is provided, disposed centrally within the element row inline-block

Key Code Description: Sub-element must be set within the display line, the parent must be set to center the text element

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < Meta > 
    </ head > 
    < style > 
        .pages2 { 
            text-align = left : Center ; // set the text to be centered parent element, the sub-element rows arranged reality, only the middle 
            border :   Solid 1px ; 
        } 

        .pages2 div { 
            the display : inline-Block ; // child element must be set 
           border : 1px Solid ; 
           width : 500px;
        }
    </style>
    <body>
    <div class="pages2">
        <div>
            aaaa
        </div>
    </div>
    </body>
</html>

1.3 Setting the floating center

Key Code Description: open parent element located opposite, left floating, this time on the right side of the parent element level,

　　　　　　　　This time, as long as the right of the child elements floating in general, just centered.

<! DOCTYPE HTML > 
< HTML > 
    < head > 
        < Meta > 
    </ head > 
    < style > 
 

        .pages2 { 
            border : 2px Red Solid ; 
            position : relative ; // need to turn relative positioning 
            left : 50% ; // make the parent element just at the right level 
            a float : left ; // stream object from the document, the width of the element content of the child's height, width, fit for the positioning
         } 

        .pages2 div { 
            border: 1px Solid ; 
            position : relative ; // open sub-elements positioned opposite 
            right : 50% ; // relative to the parent element, the right half of the offset, centered just 
            a float : left ; // mating positioning
         } 
    </ style > 
    < body > 
    < div class = "pages2" > 
        < div > 
            AAAAA 
        </ div > 
    </ div > 
    </ body > 
</ HTML >

1.4: Setting width: fit-content

Key Code Description: Set the parent element width: fit-content centering effect can be achieved

<!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 centered on the issue.

Guess you like