图像（绝对位置）在相对位置的容器中水平居中

Question

I want to center an absolute positioned image horizontally in a relative positioned container. I tried to do with css . But I could't and i did in Jquery

http://jsfiddle.net/CY6TP/ [This is i tried to do in Jquery]

**Guys can anyone help me to do this in CSS.**

Thanks in advance

Answer 1

try this:

var width=$('.main').width();
var height=$('.main').height();


$('a').css(
{
"position":"absolute",
"bottom":"50%",
"margin-top":(height/2),
"left":(width/2)-50

});

DEMO

UPDATE

In CSS

.main a{
   bottom:50%;
    margin-top:-150px;   
    position:absolute;
    left:75px;
}

DEMO

Answer 2

You can set all in css like this :

a{
position : absolute ;
height : 10px;
width : 100px;
top : 50%; 
margin-top : -5px;
left : 50%; 
margin-left : -50px;}

Demo

Answer 3

try this to make it horizontally center

a{
    position: absolute;
    text-align: center;
    width: 100%;
}

OR this to make it horizontally and vertically both center

a {
    height: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}

Answer 4

.main img { top:50%; left:50%; margin: -11px 0 0 -50px; position: absolute;}

这是你想要的吗？

Answer 5

If your height is fixed, you could use something like this maybe?

CSS:

#div1 {
    width:100%;
    height:100px;
    text-align:center;
}

#div1 img {
    line-height:100px;
}

HTML:

<div id="div1">
    <img src="yourimage.jpg" />
</div>