css - 在图像顶部居中 div

Question

出于某种原因，我无法让它工作: Website

(红色和绿色方框在正确定位后将被移除。)

感谢您的帮助。

Answer 1

在 css 中居中的总体概念非常简单。首先你需要一个相对定位的容器。要居中的子元素必须具有固定的宽度和高度，绝对定位在距离顶部 50% 和距离左侧 50% 的位置，并且上边距和左边距必须分别为宽度和高度的负一半。换句话说:

<div id="container">
    <img src="" alt=""/>
    <div class="box"></div>
</div>

.

#container { position: relative; }
img { dispaly: block; } /* It fills the container */
#box {
    position: absolute;
    width: 300px; /* Fixed */
    height 150px; /* Fixed */
    top: 50%;
    left: 50%;
    margin-top: -75px; /* 300/2 */
    margin-left: -150px; /* 150/2 */
}