如何在<div>中水平和垂直居中<img>？

Question

I don't want to center a div, I want the contents of a div to be centered. I would like horizontal and vertical alignment.

Sorry, if this is too easy or whatever, but this is kind of a hassle to get it right.

Grae

I am using IE7

Answer 1

If you know the height and width of your image, position it absolutely, set top/left to 50% and margin-top/left to negative half the height/width of your image.

#foo {
    position:relative; /* Ensure that this is a positioned parent */
}
#foo img {
    width:240px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-120px;
    margin-top:-100px;
}

Live example: http://jsfiddle.net/Zd2pz/

Answer 2

I know you've said that dont want to center a div but to achieve your requirement in a cross browser way would be easier using a jquery plugin and a fake div that contains your element to be centered.

I have successfully centered almost anything using this very small plugin that can center any block element.

The only other way I know are the answer that you already received from @simshaun & @Prhogz

EDIT: As per comment request

Include the script in your head tag

<script type="text/javascript" src="<%: Url.Content( "~/_assets/js/jquery.center.min.js" )%>"></script>

Now if you have a DIV that you want to center inside your markup simply use it as

$(document).ready(function() {
    $("#myDIV").center({ vertical: false });
});

Answer 3

although the following is obsolete , it still works for almost all browsers

<center>
<div>
your html
</div>
</center>

however, visit this link

http://www.110mb.com/forum/vertical-horizontal-alignment-of-image-within-div-t31709.0.html

Answer 4

For horizontal alignment, use text-align:center;

For vertical alignment, see for example the W3 style guide

Answer 5

If you know the inner element's height beforehand,

CSS:

.container {
    text-align: center; /* Center horizontally. */

    /* For demo only */
    border: 1px solid #000;
    height: 500px;
    margin: 20px;
    width: 700px;
}

.container img {
    margin-top: -167px;
    position: relative;
    top: 50%;
}

HTML:

<div class="container">
    <img src="http://farm6.static.flickr.com/5004/5270561847_7223069d5e.jpg" width="500" height="334" alt="">
</div>

Example