Question

我创建了一个带有图片的div标签，但是我不能强制这个div显示页面中心的所有内容：

#mydiv {
position: absolute;
height: auto;
width: 1000px;
min-height: 50px;
}

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="responsive-full-background-image.css">

</head>

<body>
<div id="mydiv"><img src="http://dummyimage.com/960x461/FF9900/fff" width="960" height="461" /></div> 
</body>

</html>

Answer 1

情人你应该使用％，因为那时图像会在不同的屏幕分辨率下保持在中间位置。

#yourdiv{
position: absolute;
height: auto;
width: 30%; ( % = the with of your image)
margin-left: 35%; ( 1/2 of % left)
margin-right: 35%; ( 1/2 of % left)
}

Answer 2

如果只需要水平居中，就可以这么简单。

http://jsfiddle.net/g4we9b7x/

body {
    text-align: center;
}
#mydiv {
    display: inline-block;
}

如果需要同时居中，请阅读 - how to center an element horizontally and vertically?

总的来说，这是最容易居中的两个方面 - http://jsfiddle.net/g4we9b7x/1/

#mydiv {
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

http://caniuse.com/#feat=transforms2d

Answer 3

尝试text-align:center

＆＃13;

#mydiv {
    background:orange;
    text-align:center;
    position: absolute;
    height: auto;
    width: 1000px;
    min-height: 50px;
}

＆＃13;

<body>
    <div id="mydiv">
        <img src="https://placekitten.com/g/200/300" width="460px" height="461px" />
    </div>
</body>

＆＃13;

Answer 4

您想将图像放在div的中心吗？使用text-align:center;

下面我将宽度替换为100％并将图像缩小以说明text-align:center;

＆＃13;

#mydiv {
position: absolute;
height: auto;
width: 100%;
min-height: 50px;
  text-align:center;
}

＆＃13;

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="responsive-full-background-image.css">

</head>

<body>
<div id="mydiv"><img src="http://dummyimage.com/96x46/FF9900/fff"  /></div> 
</body>

</html>

＆＃13;

Answer 5

根据布局的其余部分，这可能是一项艰巨的任务。更好地阅读这篇文章：http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

Answer 6

position:absolute:
width:1000px;
height:500px;
top:50%;
margin-top:-250px; <!-- minus half the height of the box -->
laft:50%;
margin-left:-500px; <!-- minus half the width of the box -->

http://codepen.io/o0nico0o/pen/RNvzKy

将带图像的div定位到页面中心

6 个答案: