对不起，如果这是重复的，我无法使用我想要尝试的关键字找到答案。我有一个网站，使用<div class="header">
<img src="bg.jpg">
<div class="nav-container">
<!-- nav stuff -->
</div>
</div>
标记构建主标题图像。我这样做是为了使图像元素可以定义标题容器的高度并做出响应。
像这样：
<div>在同一个容器中，我想要一个导航菜单，可能还有一些英雄文字，但是我希望将它全部约束到1200px宽，居中.header {
position: relative;
}
.header img {
max-width: 100%;
height: auto;
}
.header .nav-container {
width: auto;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
。通常情况下，我会通过以下方式实现这一目标：
<img>当然，使用此CSS，position: absolute;元素会向下推送导航。问题是，只要我在导航CSS中粘贴.hs，它就不再居中。它似乎尊重1200px的最大宽度，但它没有＆＃34;漂浮＆＃34;在标题的中心了。它只是向左或向右，取决于我的上/左/右值。
TL; DR - 如何在全宽图像元素上方设置1200px div？
答案 0 :(得分：3)
您可以使用left: 50%;和transform: translateX(-50%);的组合水平居中绝对定位的元素。这是一个演示http://codepen.io/anon/pen/ZLGKmo