Question

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

＆＃13;

<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>

＆＃13;

Answer 1

在代码中查看评论。每一个变化都有评论。其他一切都和你一样。（我只是不喜欢内联样式，它们使得它很难阅读）

＆＃13;

#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 */
}

＆＃13;

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

＆＃13;

Answer 2

添加
left: 50%;
transform: translate(-50%, -50%);
#test 中心到你的editText2中心。

Answer 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;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>

Answer 4

＆＃13;

        <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>

＆＃13;

Answer 5

添加左：0; 右：0; 保证金：0自动; 到你的那个#test。

Answer 6

没有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>

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

6 个答案: