当前位置：文江博客话题详情

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

发布于 2024-10-08 22:28:47 字数 225 浏览 4 评论 0原文

我想将

定位

到以 wrt body 宽度居中
到以 wrt body 高度居中

div 将具有以下属性：

div 的宽度将为 90%
高度div 自动，最小值将会被知道

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瀟灑尐姊 2024-10-15 22:28:47

我已经在 IE8、Firefox、Chrome 中对此进行了测试。它在 IE7 中不起作用。

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

现场演示

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
}

I've tested this in IE8, Firefox, Chrome. It does not work in IE7.

If you need this to work in <= IE7, I imagine the simplest solution would be to give up on pure CSS and use javascript for the vertical positioning.

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
}

回复收藏 0 原文