Center two class with CSS3

Question

I have the following tag code with two div the bg and the lb:

.bg {
  position: absolute;
  background-color: red;
  opacity: 0;
  top: 0px;
  left: 0px;
  display: none;
  height: 100%;
  width: 100%;
}

.lb {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  border: 30px solid #fff;
  box-shadow: 2px 2px 12px #333;
  background: #fff;
}

<!--bg-->
<div class="bg"></div>
<!--box de imagens-->
<div class="lb">
  <img src="">
  <div class="close">X</div>
</div>

please see the imagem with the issue and the goal:

So it is possible to center the two class with CSS3 and achieve the goal of the picture 2? thanks

Possible duplicate of [Vertically centering a div inside another div](https://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div) — Rikin, Mar 11 '18 at 14:39
Please change your code in the snippet so your problem becomes visible when running the snippet. — connexo, Mar 11 '18 at 14:39

score 2 · Answer 1 · answered Mar 11 '18 at 14:38

2

just add negative margin to you .lb class or add a transform translate.

position: absolute;
   top: 50%;
   left: 50%;   
   // SOLUTION ONE
   margin-top: -50%;
   margin-left: -50%;
   // SOLUTION TWO
   transform: translate(-50%, -50%);
   display: none;
   border:30px solid #fff;
   box-shadow: 2px 2px 12px #333;
   background:#fff;                                                     
  }

see doc for translate here

answered Mar 11 '18 at 14:38

kevinniel

1,088
1
6
14

Hi kevinniel, the // SOLUTION TWO transform: translate(-50%, -50%); works well fantastic thank you very much. thank you all – João Mar 11 '18 at 14:48
While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – rollstuhlfahrer Mar 12 '18 at 00:25

Center two class with CSS3

1 Answers1