Vertical center of Div Image

It is easy to center Div horizontally and set CSS styles.Text-align: center;You can.

Vertical center also has an attributeVertical-align: middle;This attribute has no effect on normal settings.

Method 1: Use a blank image to center vertically.

 <  Html  >      <  Style  >  # Image  {  Width  : 500px  ;  Height  :  500px  ;  Background  :  # Fff000  ;  Text-align :  Center  ;  Overflow  :  Hidden  ;      }  # Image img  {  Vertical-align :  Middle  ;  }  # Block  {  Width  :  0px  ;  Height :  100%  ;      }          </  Style  >      <  Body  >          <  Div  ID  = "Image"  >              < IMG  SRC  = "Http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"  />               <  IMG  SRC  = ""  ID  = "Block"  />          </  Div  >      </  Body  > </  Html  > 

 

I personally thinkVertical-align: MiddleIt is vertical center relative to the height on the left. I will fill the left with a div image to achieve vertical center.

Method 2: Add a table to the div.

 <  Html  >      <  Style  >  #  {  Background :  # Fff000  ;  Width  :  500px  ;  Height  :  500px  ;  Overflow :  Hidden  ;  Text-align  :  Center  ;  }  </  Style  >      <  Body  >         <  Div  ID  = ""  >              <  Table  Width  = "100%"  Height  = "100%"  >                  <  Tr  >                      <  TD Align  = "Center"  >                          <  IMG  SRC  ="Http://static.cnblogs.com/images/logo_small.gif"   />                      </  TD  >                  </  Tr  >              </ Table  >          </  Div  >      </  Body  >  </  Html  > 

In the table, it is easy to set center.

These two methods have no browser incompatibility issues. The first method is recommended.

In addition, let's talk aboutOverflow: hidden;When the image size exceeds the size of the DIV, the excess part is hidden. If this parameter is not set, the image is displayed in full and overwritten on the div.