在较薄的蒙版 div 中居中宽 div答案

【问题标题】：Centering wide div inside a thinner mask div在较薄的蒙版 div 中居中宽 div
【发布时间】：2013-07-26 01:47:03
【问题描述】：

我正在尝试将一个宽 div 居中在一个较小的 div 中，并将其居中。这个可以吗？

我有这个：

HTML

<body>
<div id="full_container">
<div id="machine_mask">
<div id="machine_container">
<!---- SOME CONTENT HERE --->
</div>
</div>
<div class="machine_footer">
<img src="sprites/base_maquina.png" alt="panel de control" />
</div>
</div>
</body>

CSS

body {
    margin :0;
}
div#full_container {
    width: 100%;
    height: 100%;
    background: #805080;
}
div#machine_mask {
    margin-top: 30px;
    width: 100%;
    display: inline-block;
    height: 600px;
    background: #805080;
    position: relative;
    overflow: hidden;
}
div#machine_container {
    width: 1230px;
    height: 500px;
    background: #805080;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

当窗口宽于 1230px 时，它居中，但是当窗口较小时，我真的需要它居中...

有没有办法做到这一点？（我正在考虑使用 jQuery 并重新定位它，但我真的更喜欢在 css 中这样做）

非常感谢！

【问题讨论】：

标签： css html position center masking

【解决方案1】：

您可以使用绝对定位技巧。

div#machine_container {
    width: 1230px;
    height: 500px;
    background: #805080;
    position: absolute;
    left: 50%;
    margin-left: -615px; //half of 1230px
    overflow: hidden;
}

【讨论】：

非常感谢！当你发布它时我无法评论它，但这对我很有帮助！
这似乎晚了 100 年，但我为动态高度或宽度的内容找到了更好的解决方案：top:50%;left:50%;transform(translate(-50%,-50% ));
@SebiSanchez 好吧。那是三年半前的事了：P flexbox 将是最好的解决方案。