Pure CSS for fully compatible elements horizontally vertically centered

The question of how the picture is centered horizontally within the box must be met frequently in the project.

Here are some of the solutions I know now.

Post the HTML code first

<class= "Boxblock">    <src= " Http://skin.huitu.com/images/noface.gif "  alt=" "/></  div>

Method 1:

. Boxblock{width:200px;Height:200px;vertical-align:Middle;Display:Table-cell;background:Pink;text-align:Center;*font-size:174px;*display:Block;}/*about the height of the 0.873,200*0.873*/. Boxblock img{_width:expression (this.width >114? ' 114px ': true);Max-width:114px;_height:expression (this.height >114? ' 114px ': true);Max-height:114px;}

Pro-Test, IE6 above, standard browser full support.

The standard browser is implemented using the Display simulation table vertical centering feature. The old version of IE browser can be implemented with font-size. Also set the Width property and the Height property.

Of course, if a float is set in the. Boxblock, the vertical center is invalidated. The solution is simple, a layer of div on the outer bread. Floating outside, not floating inside.

Method 2:

<class= "Boxblock">    <Div>         <src= "Http://skin.huitu.com/images/noface.gif"  alt  = ""/>    </div></  div>

. Boxblock{width:200px;Height:200px;Line-height:200px;background:Pink;text-align:Center;}/*compatible with standard browsers*/. Boxblock Div:before{content:".";/*<a href= "http://casinogreece.gr/" >???????????? </a> specific values are independent of vertical centering, saving characters as much as possible*/Margin-left:-15px;font-size:10px;/*fix a small bug centered*/Visibility:Hidden;/*set as hidden element*/}/*compatible with ie6,7*/. Boxblock Div img{*margin-top:expression ((200-this.height)/2);/*CSS expressions are used to be compatible with IE6/IE7*/vertical-align:Middle;Border:1px solid #ccc;}

Pro-Test, compatible with IE6 and standard browsers. For standard browsers, it is also a magical application: before

Method 3: Standard browser uses display:table-cell,vertical-align:middle mode. ie6,7 using Empty Label method

<Divclass= "Boxblock mr20">    <Div>        <I></I><imgsrc= "Http://skin.huitu.com/images/noface.gif"alt="" />    </Div></Div>

. Boxblock{width:200px;Height:200px;Line-height:200px;background:Pink;text-align:Center;vertical-align:Middle;Display:Table-cell;}. Boxblock I{Display:Inline-block;Height:100%;vertical-align:Middle}. Boxblock img{vertical-align:Middle}

Pro-Test, compatible with IE6 and standard browsers. ie6,7 is the use of empty label form

Method 4: The standard browser uses the display:table-cell,ie6,7 to use the positioning method

 <  div  class  = "Boxblock mr20"     >  <  div         >  <  img  src  = "Http://skin.huitu.com/images/noface.gif"   Alt  = ""     />  </ div  >  </ div  >  

<style type= "Text/css" >.boxblock{width:500px;Height:400px;Display:Table;text-align:Center;Border:1px solid #d3d3d3;background:#fff;}. Boxblock Div{Display:Table-cell;vertical-align:Middle;}. Boxblock img{Border:1px solid #ccc;}</style><!--[if LTE IE 7]><style type= "Text/css" >.boxblock{position:relative;Overflow:Hidden;}. Boxblock Div{position:Absolute; Left:50%;Top:50%;}. Boxblock img{position:relative; Left:-50%;Top:-50%;}</style><! [endif]-->

Pro-Test, compatible with IE6 and standard browsers. ie6,7 is the positioning implementation.

Note:

1,box must be an IMG, such as the Display inline label

2, for multiline text vertical centering problem, method 4 is applicable

Summarize:

For standard browsers, set Display:table-cell; The Vertical-align:middle method is the simplest to implement. Method two: before. Personally feel more strange. Abandon it.

For the low version of IE browser, to see a person's preferences. I like the non-tagging way, using CSS expressions to implement. ie6,7 performance problems don't feel much.

Pure CSS for fully compatible elements horizontally vertically centered