我挣扎集中对准一个div内div有position:fixed（我需要它固定为这个用户界面将漂浮在现有页面的其余部分）。中央div将包含大量内容，因此需要垂直滚动。它还需要相对于具有最大宽度的视口水平缩放。
这是我到目前为止的东西-差不多了-只是无法确定如何集中黄色div。
编辑我需要支持IE9，FF，Chrome，Safari
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title>
<style>
div {
padding: 0px;
margin: 0px;
}
#fix {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: red;
}
#my-wrap {
position: relative;
margin: 1em auto;
background-color: green;
width: 100%;
height: 100%;
}
#my-details {
position: absolute;
width: 50%;
max-width: 450px;
top: 20px;
background-color: yellow;
bottom: 0px;
overflow: scroll;
}
</style>
</head>
<body>
<div id="fix">
<div id="my-wrap">
<div id="my-details">
<p>Lots of content in here....</p>
<br style="clear: both" />
</div>
</div>
</div>
</body>
</html>
谢谢！
最简单的方法是相对定位#my-details元素，而不是绝对定位元素。然后，您可以简单地使用margin:0 auto将元素居中。由于该元素不再绝对定位，因此需要将其高度设置为100%。来取代top:20px，您可以简单地使用calc()像这样：height: calc(100% - 20px)。
#my-details {
position:relative;
margin:0 auto;
height:calc(100% - 20px);
width: 50%;
max-width: 450px;
top: 20px;
background-color: yellow;
bottom: 0px;
overflow: scroll;
}
或者，您可以更改top:20px为基于百分比的值，例如2%。然后，您可以简单地使用的高度，98%而不必使用calc()。由于这可能不是最佳解决方案，因此您还可以使用以下方法：
#fix {
padding-top:1em;
}
#my-wrap {
padding-top:20px;
}
基本上，此方法避免在父元素上top:20px添加padding-top值。然后，该元素的父元素将接收到的padding-top值1em以替换margin: 1em auto。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句