How can I align a opaque box in the middle

Question

I want the opaque (named opac) box to be in the middle like the content box (named continut)

.tot {
  position: relative;
  width: 200px;
  height: 200px;
  margin: auto;
}

.continut {
  position: relative;
  width: 200px;
  height: 200px;
  z-index: 2;
}

.opac {
  position: relative;
  width: 500px;
  height: 400px;
  z-index: 1;
  opacity: 0.8;
  background-color: #ededed;
}

<div class="tot">

  <div class="opac"></div>

  <div class="continut">
    <form action="">
      <input type="text" name="un" placeholder="Nume de utilizator">
      <input type="password" name="pw" placeholder="password">
      <input type="submit" name="l" value="Login">
    </form>
  </div>
</div>

Possible duplicate of [How to center an element horizontally and vertically?](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Heretic Monkey, Feb 11 '18 at 18:07

x_cg_x · Accepted Answer · 2018-02-11T18:02:12.583

If I understand correctly, I believe you are trying to vertically align both the contunut and opac divs.

I was able to do this with the following solution:

.tot {
  position: relative;
  width: auto;
  height: 900px; //change to whatever height fits your design
}

.abs-v-center {
  margin: auto;
  top: 0; 
  left: 0; 
  bottom: 0; 
  right:0;
}

.opac {
  position: absolute;
  background-color: #ededed;
  height: 400px;
  width: 400px;
  opacity: 0.8;
}

.continut {
  position: absolute;
  height: 200px;
  width: 200px;
}

By setting the wrapper div to position: relative and giving it a fixed width and height you can then align its children accordingly to the wrapper div by adding position: absolute.

I abstracted the positioning rules into a separate class called .abs-v-center and applied it to both elements which should align each to the middle of the wrapper div.

Solution #2:

Alternatively, you can incorporate flexbox which makes vertical alignment a breeze.

.tot {
  display: flex; // set wrapper to display flex
  justify-content: center; // horizontally align children (like margin: 0 auto)
  align-items: center; //vertically align children (flexbox goodness)
  width: auto;
  height: 900px;
}

.opac {
  position: absolute; //set to aboslute to removed from the normal document flow so that elements are not placed next to each other.
  background-color: #ededed;
  height: 400px;
  width: 400px;
  opacity: 0.8;
  z-index: -1; // set z-index to place opac div behind continut div
}

.continut {
  height: 200px;
  width: 200px;
}

If you are new to flexbox checkout this article

How can I align a opaque box in the middle

1 Answers1