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

Posted 2023-03-05

【中文标题】如何使用css将div位置绝对移动到中心？ [复制]

【英文标题】：How to move div position absolute to center using css? [duplicate]

【发布时间】：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 是什么意思？图片未居中

【参考方案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 就可以了。