How to move div position absolute to center using css?

Question

How to move div id="test" to center of id="main" like image ?

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

Since you know that width of test is 70%, a left: 15% should be enough — Eineki, Feb 15 '18 at 07:34
add css margin:0 auto;right:0; in div id="test" it will work. — Gufran Hasan, Feb 15 '18 at 07:37

caramba · Accepted Answer · 2018-02-15T07:53:19.513

See comments in code. Every change has comment. Everything else is as you had it. (I just don't like inline styles, they make it so hard to read)

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

Why div `id="main"` still height morethan image ? how can i do ? — mamiw, Feb 15 '18 at 07:45
@mamiw I've updated the answer. You need to add `vertical-align: middle;` to the image. — caramba, Feb 15 '18 at 07:53

score 2 · Answer 2 · answered Feb 15 '18 at 07:37

2

Adding
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
centers to your #test centers it.

answered Feb 15 '18 at 07:37

Robert S.

126
1
3

Ezzuddin · Answer 3 · 2018-02-15T08:02:38.777

1

You can try this

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

edited Feb 15 '18 at 08:02

answered Feb 15 '18 at 07:32

Ezzuddin

645
5
18

Why div `id="main"` still height morethan image ? how can i do ? – mamiw Feb 15 '18 at 07:45
Check updated code – Ezzuddin Feb 15 '18 at 08:03

score 1 · Answer 4 · answered Feb 15 '18 at 07:35

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

add css margin:0 auto;right:0; in in test id div – Gufran Hasan Feb 15 '18 at 07:36 — Gufran Hasan, Feb 15 '18 at 07:36

score 1 · Answer 5 · answered Feb 15 '18 at 07:54

No Flexbox solution? I can't believe it. OK so, here goes :

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

score 0 · Answer 6 · answered Feb 15 '18 at 07:41

0

Add left: 0; right: 0; margin:0 auto; to your #test that's it.

answered Feb 15 '18 at 07:41

Sarim

124
4

How to move div position absolute to center using css?

6 Answers6