CSS: horizontal center and vertical center, css horizontal center vertical

CSS: horizontal center and vertical center, css horizontal center vertical
CSS Center is a relatively basic problem. In actual use, there are two situations to consider. One is mainly the center of text, pictures, and other row elements, one is the center of block-level label elements such as div.

Horizontal Center

1. In-Row Element (mainly text, image, and other in-row elements), you can set text-align: center in the parent element to center the element in the Child row. 2. Set the fixed width block level element to the fixed width block level element:

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

3. There are three ways to center an element with an indefinite width block level: Method 1: Wrap the element with a table label, including tbody, tr, td, however, this method adds a non-semantic tag to the center. --------------------------------------------------------- Give a chestnut---------------------------------------------------------HTML:

1 <div> 2 <table> 3 <tbody> 4 <tr> 5 <td> 6 <ul> 7 <li> <a href = "#"> Yes </a> </li> 8 <li> <a href = "#"> center </a> </li> 9 <li> <a href = "#"> ul tag </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 has problems: ---------------------------------------------------------Chestnuts---------------------------------------------------------  Method 2: After the element is set to inline, the method of centering the element in the row is followed. This method changes the display style of the element. ---------------------------------------------------------Example---------------------------------------------------------HTML:

1 <div> 2 <ul> 3 <li> <a href = "#"> Yes </a> </li> 4 <li> <a href =" # "> center </a> </li> 5 <li> <a href =" # "> ul tag </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 are normally centered, and IE7 has no problems. ---------------------------------------------------------Chestnuts---------------------------------------------------------Method 3: Set float/display: inline-block for the parent element (IE7 sets inline-block to a block-level element. hack is required, that is, * display: inline; * zoom: 1;), then set position: relative and left: 50% for the parent element, and set position: relative and left:-50% for the child element to realize horizontal center. ---------------------------------------------------------Example---------------------------------------------------------HTML:

1 <div> 2 <ul> 3 <li> <a href = "#"> Yes </a> </li> 4 <li> <a href =" # "> center </a> </li> 5 <li> <a href =" # "> ul tag </a> </li> 6 </ul> 7 </div>

CSS:

1 div {2 display: inline-block; 3/* compatible with IE6, IE7 */4 * display: inline; 5 * zoom: 1; 6 position: relative; 7 left: 50% 8} 9 ul {10/* compatible with IE6 */11 _ display: inline; 12 _ zoom: 1; 13 list-style: none; 14 margin: 0; 15 padding: 0; 16 position: relative; 17 left:-50%; 18} 19 li {20 float: left; 21 margin-right: 8px; 22}

Chrome, Firefox, opera, and IE6 + can all be normal. Note: 1. _ display: inline actually triggers the inline-block Effect of block-level elements in IE6. _ zoom: 1 triggers the hasLayout effect in IE6, here, other browsers do not need to trigger the inline-block effect, because it is not very clear; 2. display: inline-block can also be replaced with float, the main function of float is to generate the inline-block effect, so that the Code will be more concise and there is no need to consider too many compatibility issues: CSS:

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

---------------------------------------------------------Chestnuts--------------------------------------------------------- Vertical centerVertical center is mainly because it is troublesome to center row elements, especially the center of multi-line text. 1. The height of the parent element is determined Line Element (single line text ),This is achieved by setting the height of the parent element to be consistent with the line-height. 2. Fixed height Block-level elementsFixed vertical center height Block-level elementsThere are three ways to center vertically: Method 1: in fact, this method is the method of centering the absolute element. The parent element sets position: relative, and the vertical center element sets position: absolute. When you want to live vertically, set top: 0; bottom: 0, and then set auto for the upper and lower margin. The same applies to horizontal center. IE6 and IE7 do not support this center method. This method applies to the element with the position set as absolute. ---------------------------------------------------------Example---------------------------------------------------------HTML:

1 <div class = "wrap"> 2 <div class = "container"> 3 <p> I want to vertically center block-level elements. </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;11     position:absolute; 12     right: 0;13     left:0;14     top:0; 15     bottom:0; 16     margin:auto; 17 }

Chrome, Firefox, opera, and IE8 + are shown as follows, horizontally and vertically centered: ---------------------------------------------------------Chestnuts---------------------------------------------------------Method 2: Set position: relative for the parent element, and set the vertical center element:

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

Here, "top" is changed to "bottom", and "margin-top" is changed to "margin-bottom". This method applies to the element with the position set as absolute. ---------------------------------------------------------Example---------------------------------------------------------HTML:

1 <div class = "wrap"> 2 <div class = "container"> 3 <p> I want to vertically center block-level elements. </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%; 10 height: 100px; 11 margin-top:-50px;/* half of the height */12 background: #00ff00; 13}

Chrome, Firefox, opera, and IE6 + can all be centered: IE6 has slightly different performance due to the 3px bug. However, we will not pay much attention to it because we mainly discuss vertical center. ---------------------------------------------------------Chestnuts---------------------------------------------------------    Method 3: Create a floating element before the element to be vertically centered. Set margin-bottom to half the height of the vertical center element and half the height of the parent element, to be compatible with IE6 and IE7, you also need to set the width symbolically. The vertical center element clears the float. However, this method creates non-semantic tags and requires compatibility processing. ---------------------------------------------------------Example---------------------------------------------------------HTML:

1 <div class = "wrap"> 2 <div class = "floatdiv"> </div> 3 <div class = "container"> 4 <p> 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 with IE6, IE7 */8 float: left; 9 height: 50%; 10 margin-bottom:-50px; 11} 12. container {13 clear: both; 14 height: 100px; 15 position: relative; 16 background: #00ff00; 17}

Chrome, Firefox, opera, and IE6 + can all be centered: ---------------------------------------------------------Chestnuts---------------------------------------------------------3. The height of the parent element is determined Line Element( Multi-line text, image), block elementsThe height of the parent element is determined Line Element( Multi-line text, image), block elements vertical centerThere are two methods :
 Method 1: Use the INSERT table (including tbody, tr, and td) label and set vertical-align: middle. ---------------------------------------------------------Example---------------------------------------------------------HTML:

1 <table> 2 <tbody> 3 <tr> 4 <td class = "wrap"> 5 <div> 6 <p> I want to vertically center a text segment. </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 +: Note: 1. By default, vertical-align is set to middle For the td tag, therefore, we do not need to explicitly set the div; 2. Change the div to the img with the same effect. ---------------------------------------------------------Chestnuts---------------------------------------------------------Method 2: Set the display of block-level elements to table-cell in chrome, Firefox, opera, IE8, and later browsers to activate the vertical-align attribute, note that IE6 and 7 do not support this style. ---------------------------------------------------------Example---------------------------------------------------------HTML:

1 <div> 2 <p> I want to vertically center a text segment. </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 normal, and IE6 and IE7 cannot be centered. ---------------------------------------------------------Chestnuts---------------------------------------------------------There are many methods for vertical center. For which method to use, we still need to check the situation, and I believe there are more methods. You are welcome to add them.  The level is limited. correct the error. For original blog posts, please indicate the source.