CSS implementation elements Horizontal Vertical Center Summary 5 Method

Personal Summary, if there are errors please point out, there are good suggestions please leave a message. O (^▽^) o

First, margin:0 Auto;text-align:center;line-height method　

1 <  ID= "Divauto">margin,text-align; horizontal center </div> 

1 /* 2 margin:0 Auto; Sets the horizontal center of the block element (or elements similar to it)3 text-align:center; Sets the horizontal center of some inline objects (or similar elements), such as text or IMG tags4 line-height:; height set to container height enables single-line text to be centered vertically (pseudo-centered)5 Overflow:hidden; To prevent content from exceeding the container or creating a wrap6 */7 #divAuto{8 width:300px;9 Height:50px;Ten Background-color:#ff6a00; One margin:0 Auto; A text-align:Center; - Line-height:50px; - Overflow:Hidden; the}

Two, Div does not set height, child element padding fill

1     <  ID= "Divpar">2         <p> padding Fill Implementation Center </p>3     </Div >

1 /*2 Div does not set height3 padding:20px 0; Using the padding value to fill the div is a "look" vertically centered way,4 The premise of this approach is that the height of the container must be scalable5 */6 #divPar{7 width:100px;8 Background-color:#00ff21;9}Ten #divPar P{ One padding:20px 0; A}

Third, Display:table;display:table-cell; Element tabular implementation vertically centered

   <id= "Divbox">        <id= " Divchild ">table, Vertical-align:middle; achieve vertical centering </div>    </div>

1 /*2 using table to center elements vertically3 the display of the parent div is set to table4 the display of the Sub Div is set to Table-cell5 Vertical-align:middle by means of the vertical center of the element6 Cons: IE8 invalid7 */8 #divBox{9 width:200px;Ten Height:100px; One margin:10px Auto; A Background-color:#000000; - Display:Table; - text-align:Center; the} - #divChild{ - width:50px; - Height:50px; + Background-color:#ff6a00; - Display:Table-cell; + vertical-align:Middle; A}

The realization of the absolute positioning of the child elements by using the parent element relative to the set

    <id= "Divrel">        <id= " Divabs "> absolute positioning </div>    </Div  >

1 /*2 the child element is horizontally vertically centered by using the parent element to position the child element in the absolute position3 top:50%;left:50% implements the upper-left corner of a child element in the center of the parent element4 margin sets the half of the height of a child element with a wide and high negative. Implements a child element to be horizontally vertically centered relative to the parent element5 Cons: When there is not enough space, the content disappears (similar to div within the body, when the user shrinks the browser window, the scrollbar does not appear)6 */7 #divRel{8 width:500px;9 Height:200px;Ten position:relative; One Background-color:#ffd800; A} - #divAbs{ - width:100px; the Height:50px; - position:Absolute; - Background-color:#4800ff; - text-align:Center; + Top:50%; -  Left:50%; + margin:-25px 0 0-50px; A}

1 /*another way to realize the absolute residence neutron element*/2 #divAbs{3 width:100px;4 Height:50px;5 position:Absolute;6 Background-color:#4800ff;7 text-align:Center;8  Left:0;/*--left and right pairs appear to control the horizontal direction--*/9  Right:0;Ten Top:0;/*--top and bottom pairs appear to control the vertical direction of the center--*/ One Bottom:0; A margin:Auto;/*this sentence is necessary.*/ -      -}

V. Using a div when the fill element implements the vertical center of the child element

    <DivID= "Parent">        <DivID= "Zero"> Fill Element </Div>        <DivID= "Child">Content here</Div>    </Div>

1 /*This method inserts a div outside of the content element. Set this div height:50%; Margin-bottom:-contentheight;content clears the float and displays in the middle;2 Cons: Additional empty elements are required*/3 4 #parent{width:800px;5 Height:300px;6 Border:1px solid #ccc;}7 8 #zero{9 float: Left;Ten Height:50%; One Margin-bottom:-100px;/*half the height of the center element*/ A} - #child{ - Clear: Left;/*Clear Floating*/ the Height:200px; - Background-color:#ff0000; -}

Experience is limited, temporarily updated to here ...

CSS implementation elements Horizontal Vertical Center Summary 5 Method