CSS Layout Rollup

1. Block element: margin:0 Auto;

2. inline block or inline element: text-align:center;

3.position:static (default), relative (relative to its own position), absolute (relative to the nearest positioned element of the parent box positioning, except for static two), positioning mates Top,left,right,bottom use

4.float:left,right, note: You need to clear the floating effect

1. Use Clear:both for elements at the back level;
2. Use Overflow:hidden;
3. The parent box of the floating element is set to accommodate the height of the floating box
4. Use pseudo-elements. Clear:after{content: "."; display:block;clear:both;height:0;width:0;}
5. In order to compatible with IE, need to add *zoom:1;

5. Use the parent box to set Display:table-cell; However, this method can only be used in ie8+, Google, Firefox and other browsers, IE6, IE7 are not valid.

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>Document</title>6     <style>7 . Big{8 width:500px;9 Height:500px;Ten Background-color:#ccc; One text-align:Center; A Display:Table-cell; - vertical-align:Middle; -         } the . Small{ - width:200px; - Height:300px; - Display:Inline-block; + Background-color:#53ff53; -         } +     </style> A </Head> at <Body> -     <Divclass= "Big"> -         <Divclass= "small"></Div> -     </Div> - </Body> - </HTML>

6. Position:absolute;top:50%;left:50%;margin-left The box: Half the width of the negative box; Margin-top: Half of the height of the negative box;

7. Minor changes to the above code, when the size of the box is not known, the position of the offset with Transform:translate3d ( -50%.-50%,0)

8. Using Float:left and relative positioning position:relative positioning, the details do not need to know the size of the center box, but the positioning of the box to add a layer of box, first half of the middle box, and then the small box moved more than half

<! DOCTYPE html>
　　
CSS Layout Rollup