Several methods of horizontal vertical centering of unknown wide-height pictures

Recently encountered in the project is not fixed width of the picture to horizontal vertical center, found that there is a compatibility problem in the vertical center, the following collection of methods, can be used as a tradeoff.

1. Background method (good compatibility, simple, but not conducive to the dynamic import of pictures)

Html:

<class= "wrap"></div>

Css:

. Wrap {    width:300px;     height:200px;     background: url (... /img/test.jpg) Center center no-repeat;}

2. Use a P tag outside the picture to center the picture vertically (better compatibility) by setting Line-height

Html:

<class= "wrap">    <src= "./ Img/test.jpg "></div>

Css:

. Wrap{width:300px;Height:300px;Border:1px solid #000;text-align:Center;}. Wrap P{width:300px;Height:300px;Line-height:300px;}. Wrap p img{*margin-top:expression ((300-this.height)/2);vertical-align:Middle;}

3. Using Display:table-cell (incompatible IE6, 7)

Html:

<class= "wrap">    <src= "./ Img/test.jpg "></div>

Css:

. Wrap {    width: 300px;     height: 200px;     Border: 1px dashed #ccc;     display: Table-cell;      vertical-align: Middle;     text-align: center;}

4. Add Table label (good compatibility, but redundant labels more)

Html:

<Divclass= "Wrap">    <Table>        <TR>            <TDAlign= "Center"><imgsrc= "./img/test.jpg"/></TD>        </TR>    </Table></Div>

Css:

. Wrap {    width: 300px;     height: 200px;     Border: 1px dashed #ccc;     text-align: center;} . Wrap Table {    width: 300px;     height: 200px;}   

Several methods of horizontal vertical centering of unknown wide-height pictures