如何使用css将div位置绝对移动到中心？ [复制]答案

【问题标题】：How to move div position absolute to center using css? [duplicate]如何使用css将div位置绝对移动到中心？ [复制]
【发布时间】：2018-07-25 21:33:44
【问题描述】：

如何像图片一样将 div id="test" 移动到 id="main" 的中心？

<div id="main" 
     style="
            position: relative;
            display: inline-block;
            text-align: center;
            border: 1px solid;
        ">
  <img src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg" style="width: 70%;height: auto;border: none;max-width: 100%;">
    <div id="test" style="display: block;position: absolute;top: 0;left: 0;width: 70%;height: 100%;color: #FFF;background: rgba(0, 0, 0, .6);">
    </div>
</div>

【问题讨论】：

既然你知道测试的宽度是 70%，那么左：15% 就足够了
添加 css 边距：0 auto;right:0;在 div id="test" 中它会起作用。
like image 是什么意思？图片未居中

标签： html css

【解决方案1】：

查看代码中的 cmets。每个更改都有注释。其他一切都和你一样。（我只是不喜欢内联样式，它们让它很难阅读）

#main {
    position: relative;
    display: inline-block;
    text-align: center;
    border: 1px solid;
}

#test {
    position: absolute;
    display: block;
    top: 50%; /* changed from 0 to 50% */
    left: 50%; /* changed from 0 to 50% */
    width: 70%;
    height: 100%;
    color: #FFF;
    background: rgba(0, 0, 0, .6);

    transform: translate(-50%, -50%);  /* added this line */
}

#main img {
    width: 70%;
    height: auto;
    max-width: 100%;
    /* border: none; this is not needed */
    vertical-align: middle; /* add this line */
}

<div id="main">
  <img src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg">
  <div id="test"></div>
</div>

【讨论】：

为什么 div id="main" 仍然高度超过图像？我该怎么办？
@mamiw 我已经更新了答案。您需要在图片中添加vertical-align: middle;。

【解决方案2】：

添加
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
以您的#test 为中心。

【讨论】：

【解决方案3】：

        <div id="main" style="
            position: relative;
            display: inline-block;
            text-align: center;
            border: 1px solid;
        ">
            <img src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg" style="width: 70%;height: auto;border: none;max-width: 100%;">
            <div id="test" style="display: block;position: absolute;top: 0;left: 0;width: 70%;margin:0 auto;right:0;height: 100%;color: #FFF;background: rgba(0, 0, 0, .6);">
            </div>
        </div>

【讨论】：

添加 css 边距：0 auto;right:0;在测试 id div 中

【解决方案4】：

没有 Flexbox 解决方案？我不敢相信。好的，就这样吧：

.parent {
  border : blue solid 2px;
  width : 400px;
  height: 300px;

  display : flex;
  align-items : center;
  justify-content : center;
}

.child {
  border : green solid 2px;
  width : 200px;
  height: 200px;
}

<div class="parent">
   <div class="child"></div>
</div>

【讨论】：

【解决方案5】：

你可以试试这个

<div id="main" style="position: relative;display: inline-block;text-align: center;border: 1px solid;">
    <img src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg" style="width: 70%;height: auto;vertical-align:middle;border: none;max-width: 100%;">
    <div id="test" style="display: block;position: absolute;top: 0;left: 0; right:0; margin:0 auto;width: 70%;height: 100%;color: #FFF;background: rgba(0, 0, 0, .6);">
    </div>
</div>

【讨论】：

为什么 div id="main" 仍然高度超过图像？我该怎么办？
检查更新代码

【解决方案6】：

添加左：0；右：0；边距：0 自动；到你的#test 就可以了。

【讨论】：