Wysrodkowanie login screenu - Ktora metoda?

Question

Dzien dobry,

Mam takie pytanie dotyczace tego jak srodkujecie login screen w RWD. Znam dwie metody, ale nie wiem ktora jest bardziej poprawna.

Piersza jest wrzucenie wszystkiego do jednego diva a nastepnie wysrodkowanie za pomoca position absolute, top 50, left 50

Druga metoda, to uzycie flex'a a nastepnie uzycie justify-content space-arround

Drugi sposob wydaje mi sie lepszy ale rozjezdza sie gdy wysuwa sie klawiatura.

Ktory sposob jest bardzie odpowiedni? Czy moze istnieje cos innego?

Answer 1

Nie wiem dokładnie co chcesz wyśrodkować , ale są różne metody

jak używasz pozycjonowania to trzeba dołożyć transform: translate(-50%,-50%);

czasami można wyśrodkować za pomocą margin: 0 auto;

jak masz jeden wyraz/zdanie w jednej lini to można użyć line-height: wysykość diva,

i standardowo display:flex, justify-content:center, aling-items:center;

Answer 2

Co do pierwszego sposobu, to takie wyśrodkowanie nie będzie równe. Na środku będzie się znajdował lewy górny róg div-a, a nie jego środek. Ja bym użył flexboxa.

Comments

Tak, aby pierwszy był poprawny to trzeba użyć jeszcze transform: translate(-50%, -50%);

Answer 3

Użyłbym Flexbox'a .

Answer 4

Wymienione zostało już chyba wszystko, ale ja dodam swoje 3 grosze, można jeszcze tak  (aczkolwiek to jak rzeźbienie w g....ie)

<div class="grid-container">
  <div class="margin-left"></div>
  <div class="center">Jestem na środku</div>
  <div class="margin-right"></div>  
</div>

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 0fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas:
    "margin-left center margin-right";
  width: 100vw;
  height: 100vh;
}
.margin-left { 
  grid-area: margin-left;
}
.center {
  white-space: nowrap;
  grid-area: center;
  margin-top: 50vh;
}
.margin-right { 
  grid-area: margin-right;
}

Ja osobiście preferuję

<div class="center">Mam wrażenie, że jestem na środku</div>

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  border: 0;
}
.center {
  position: absolute;
  font: 1.2em/2.2em monospace;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}