图像(绝对定位)相对定位容器中的水平中心

Question

我想在相对定位的容器中水平居中放置一个绝对定位的图像。我试着使用css。但我做不到，我在Jquery 中做到了

http://jsfiddle.net/CY6TP/[这是我在Jquery中尝试做的]

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

提前感谢

Answer 1

试试这个：

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

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

演示

更新

在CSS 中

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

DEMO

Answer 2

您可以在css中设置所有内容，如下所示：

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

演示

Answer 3

尝试使其水平居中

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

或者这样做，使其水平和垂直两个中心

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

如果你的身高是固定的，你可能会使用这样的东西？

CSS:

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

HTML:

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