CSS: Center horizontally and vertically

Original link: Http://www.cnblogs.com/JuFoFu/p/4450162.html#undefinedCSS Center is a relatively basic problem, in the actual use, need to take into account the general is two cases, one is mainly expressed as text, The center of the element in a picture, such as a Div, is the center of a block-level tag element.

Center horizontally

1, inline elements within the element (mainly expressed as text, pictures and other inline elements), by setting Text-align:center in the parent element to center the elements in the child row. 2, fixed-width block-level elements are fixed-width block-level element settings:

1 margin-left:auto;2 Margin-right:auto;

3, indefinite wide block-level element indefinite wide block-level elements are centered in three ways:

1. Add Table Label
2. Set the Display:inline method
3. Set Position:relative and left:50%

Method One: Wrap the elements with a table tag, including TBODY, TR, TD, but this method adds a non-semantic label to the center. ---------------------------------------------------------give me a chestnut ------------------------------------------ ---------------Html:

1 <div> 2   <table> 3     <tbody> 4       <tr> 5         <td> 6            <ul> 7               <li ><a href= "#" > I was going to </a></li> 8               <li><a href= "#" > Center </a></li> 9               <li><a href= "#" >ul tags </a></li>10            </ul>11         </td>12       </tr>13     </tbody>14   </table>15 </div>

Css:

1 table{2     margin:0 auto;3}4 ul{list-style:none;margin:0;padding:0;} 5 li{float:left;margin-right:8px;}

Modern browsers behave normally: IE7 sometimes problems occur: --------------------------------------------------------- finish eating chestnuts ----------------------------- ----------------------------  Method Two: Set to inline elements followed by the middle of the inline element method, this method changes the display style of the element. --------------------------------------------------------- give me a chestnut --------------------------------- ------------------------Html:

1 <div>2     <ul>3        <li><a href= "#" > I was going to </a></li>4        <li><a href = "#" > Center </a></li>5        <li><a href= "#" >ul label </a></li>6   </ul>7 </div>

Css:

1 div{2   text-align:center;3}4 ul{list-style:none;margin:0;padding:0;display:inline;} 5 Li{margin-right:8px;display:inline;}

The browsers behaved normally in the center, and IE7 did not have any problems. ---------------------------------------------------------Finish eating chestnuts ----------------------------- ----------------------------Method Three: By setting Float/display:inline-block for the parent element (IE7 to block-level element settings Inline-block support is not good, need to hack, that is, *display:inline;*zoom:1;), and then set the parent element Position:relative and left:50%, the child elements are set position:relative and left:-50% to achieve horizontal centering. --------------------------------------------------------- give me a chestnut --------------------------------- ------------------------Html:

1 <div>2     <ul>3        <li><a href= "#" > I was going to </a></li>4        <li><a href = "#" > Center </a></li>5        <li><a href= "#" >ul label </a></li>6     </ul>7 </div>

Css:

1 div{2     display:inline-block; 3     */compatible ie6,ie7*/4     *display:inline; 5     *zoom:1; 6     position:relative ; 7     left:50% 8} 9 ul{10/     * compatible IE6*/11     _display:inline;12     _zoom:1;13     list-style:none;14     Margin:0;15     padding:0,     position:relative;17     left:-50%;18}19     li{20 float:left;21 MARGIN-RIGHT:8PX;22}

chrome,firefox,opera,ie6+ can all behave normally. Note: 1, _display:inline is actually triggered IE6 in block-level elements show inline-block effect, _zoom:1 trigger IE6 haslayout effect, where other browsers do not need to trigger the inline-block effect, the reason is not very clear ; 2, where display:inline-block can also be replaced with float, the main role of float is to produce inline-block effect, so the code will be more concise, do not consider too many compatibility issues: CSS:

1 div{2     float:left; 3     position:relative; 4     left:50% 5} 6 ul{7/     * Compatible ie6*/8     _float:left; 9     list- style:none;10     margin:0;11     padding:0;     position:relative;13     left:-50%;14}15 li{16     float: Left;17     margin-right:8px;18}

--------------------------------------------------------- finish eating chestnuts ----------------------------- ---------------------------- Center Verticallyvertical centering is mainly the problem of centering the inner elements of the line, especially the center of multiple lines of text. 1, the parent element height determines the inline element (single line of text), This is achieved by setting the height of the parent element and Line-height. 2, the height of fixed block-level elementsVertical centering Height fixed block-level elementsThere are three ways to center vertically:

1. The vertical center element is set absolute, which is centered by the center of the absolute element;
2. The vertical centering element is set absolute and adjusted by the top and Margin-top properties;
3. Create a floating element;

Method One: In fact, this method is the absolute element centered method, the parent element is set position:relative, the vertical center element is set Position:absolute, when you want to center vertically, set the top:0;bottom:0, and then for the upper and lower Margin setting auto, horizontal centering is also the same. IE6,IE7 does not support this method of centering. This approach applies to elements that are originally set to position as absolute. --------------------------------------------------------- give me a chestnut --------------------------------- ------------------------Html:

1 <div class= "wrap" >2   <div class= "container" >3      <p> I'm a block-level element that I want to center vertically. </p>4   </div>5 </div>

Css:

1. wrap{2     width:200px; 3     height:200px; 4     background: #ccc; 5     position:relative; 6} 7. container{8     width:100px; 9     height:100px;10     background: #00ff00, one     position:absolute, one     right:0;13     left:0;14     Top : 0;     bottom:0,     Margin:auto; 17}

The chrome,firefox,opera,ie8+ behaves as follows, horizontally vertically centered: --------------------------------------------------------- finish eating chestnuts ----------------------------- ----------------------------Method Two: The parent element is set position:relative, and the element setting needs to be centered vertically:

1 position:absolute;2 top:50%;3 height:2hpx;4 margin-top:-hpx;

Here the top is changed to Bottom,margin-top to margin-bottom effect, this method is suitable for the element that originally set position to absolute. --------------------------------------------------------- give me a chestnut --------------------------------- ------------------------Html:

1 <div class= "wrap" >2   <div class= "container" >3      <p> I'm a block-level element that I want to center vertically. </p>4   </div>5 </div>

Css:

1. wrap{2   width:100px; 3   height:200px; 4   background: #ccc; 5   position:relative; 6} 7. container{8
   position:absolute;  9     top:50%, ten     height:100px, one     margin-top:-50px;/* Half of Height *     /background: #00ff00; 13}

chrome,firefox,opera,ie6+ can be centered: IE6 because the 3px bug performance slightly different, but because here mainly discusses vertical center, so do not pay attention to it too much. --------------------------------------------------------- finish eating chestnuts --------------------------------- ------------------------    Method Three: Create a floating element before the element that needs to be centered vertically, the floating element is set Margin-bottom to half the height of the vertical center element, the height is half the height of the parent element, and for compatibility with IE6, IE7, it is also necessary to set the width symbolically. The vertical center element clears the float. However, this method creates a non-semantic tag and does some compatibility processing. --------------------------------------------------------- give me a chestnut --------------------------------- ------------------------Html:

1 <div class= "wrap" >2     <div class= "Floatdiv" ></div>  3     <div class= "container" >4         <p> I'm a block-level element that I want to center vertically. </p>5     </div>6 </div>

Css:

1. wrap{2     width:100px; 3     height:200px; 4     background: #ccc; 5} 6. floatdiv {7     *width:1px;/* compatible IE6, ie7* /8     Float:left;  9     height:50%,     margin-bottom:-50px;11}12 container {     clear:both,     height:100px     ; position:relative;16     background: #00ff00; 17}

chrome,firefox,opera,ie6+ can be centered: --------------------------------------------------------- finish eating chestnuts ----------------------------- ----------------------------3, the parent element is highly determined in-line elements（ multiple lines of text, pictures), block elementsParent element Height-determined in-line elements（ multi-line text, picture), block elements vertically centeredThere are two ways :

1. Add a table tag;
2. Set display to Table-cell to activate the Vertical-align property.

 Method One: Use the Insert table (including TBODY, TR, TD) labels, and set the Vertical-align:middle. --------------------------------------------------------- give me a chestnut --------------------------------- ------------------------Html:

1 <table> 2   <tbody> 3     <tr> 4       <td class= "Wrap" > 5         <div> 6           <p> I'm a piece of text that I want to center vertically. </p> 7         </div> 8       </td> 9     </tr>10   </tbody>11 </table>

Css:

1. wrap{2    width:100px;3    height:200px;4    background: #ccc5}

chrome,firefox,opera,ie6+ performance as follows: Note: 1, because TD label by default is set by default vertical-align for middle, so we do not need to set explicitly, 2, the DIV for the IMG effect is the same. --------------------------------------------------------- finish eating chestnuts --------------------------------- ------------------------Method Two: In Chrome, Firefox, opera, IE8 and above the browser can be set block-level element display for Table-cell, activating vertical-align properties, but note IE6, 7 does not support this style. --------------------------------------------------------- give me a chestnut --------------------------------- ------------------------Html:

1 <div>2   <p> I'm a piece of text that I want to center vertically. </p>3 </div>

Css:

1 div{2   width:100px;3   height:200px;4   background: #ccc; 5   display:table-cell;6   VERTICAL-ALIGN:MIDDLE;7}

Chrome, Firefox, opera, IE8 and above are behaving normally, and IE6 and IE7 are not centered. --------------------------------------------------------- finish eating chestnuts --------------------------------- ------------------------The vertical center of the method is more, as to which method or to be specific to look at the situation, and I believe there are more ways to welcome you to add.

CSS: Center horizontally and vertically