Question

我想定位<div>

使用w.r.t体宽进行居中
以身高w.r.t到中部

div将具有以下属性：

div的宽度将为90％
div auto的高度，分钟。将会知道

Answer 1

我已在 IE8 ，Firefox，Chrome中测试了这一点。它在IE7中不起作用。

如果你需要在＆lt; = IE7中工作，我想最简单的解决方案是放弃纯CSS并使用javascript进行垂直定位。

Live Demo

<强> HTML：

<div id="container"> 
    <div id="content"> 
        <input type="button" value="click me" onclick="javascript:document.getElementById('content').innerHTML += 'i i i i i i i i i i i i i i i i i i i i i i i i i<br />';" /><br />
        i i i i i i i i i i i i i i i i i i i i i i i i i<br />
        i i i i i i i i i i i i i i i i i i i i i i i i i<br />
        i i i i i i i i i i i i i i i i i i i i i i i i i<br />
        i i i i i i i i i i i i i i i i i i i i i i i i i<br />
    </div> 
</div>

<强> CSS：

html, body {
 margin: 0;
 padding: 0;
 border: 0;

 width: 100%;
 height: 100%
}

body {
 display: table
}

#container {
 width: 100%;
 display: table-cell;
 vertical-align: middle
}

#content {
 background: red;
 width: 90%;
 margin: 0 auto;
 min-height: 150px
}

Answer 2

您可以居中高度like this（注意浏览器兼容性）。

对于居中宽度：您可以使用position: absolute;和left: 50%;，以及margin: -num;。在边距中，将num替换为div的一半宽度。

Answer 3

用此设置div。我认为它在IE 7及更低版本中不起作用。可怕的IE ....

余量：汽车; 顶部：0;右：0;左：0;底部：0; 位置：绝对的;

Answer 4

您可以使用5％的边距（左，右）来模仿对中宽度的效果。

关于高度居中，我不知道你可以单独使用css的方式（因为未知的垂直尺寸）。但你可以尝试使用javascript来做到这一点。

以下是一个示例：http://www.demtron.com/blog/post/2009/01/14/Centering-a-DIV-Window-with-Cross-Browser-JavaScript.aspx（您可以忽略检测窗口大小部分）。

CSS高级Div定位。中心和中间

4 个答案: