centrowanie obiektu na stronie w html i css

pytanie zadane 24 stycznia 2018 w HTML i CSS przez happers Nowicjusz (150 p.)
zmienione kategorie 24 stycznia 2018 przez draghan

Chciałbym się dowiedzieć, czy ktoś z was ma SKUTECZNY sposób na wycentrowanie dowolnego obiektu na środku strony ?

Ściślej chodzi o to, że mam ekran logowania do bazy, każdy użytkownik ma ustawioną inną rozdzielczość na monitorze i chciałbym osiągnąć taki efekt, że ktokolwiek z dowolną ustawioną rozdzielczością uruchomi stronę z bazą, to ramka do wpisania loginu i hasła będzie centralnie na środku. To rozwiązanie chciałbym również zastosować do zbudowania całej strony obsługującej bazę. W ramach utrudnienia dodam, że ten efekt chciałbym osiągnąć TYLKO w HTML i CSS.

Proszę o poważne odpowiedzi

4 odpowiedzi

odpowiedź 24 stycznia 2018 przez thryndl Nałogowiec (30,470 p.)
wybrane 24 stycznia 2018 przez happers

odpowiedź 24 stycznia 2018 przez Daniel90 Pasjonat (17,970 p.)

Flexbox.

komentarz 24 stycznia 2018 przez happers Nowicjusz (150 p.)
edycja 24 stycznia 2018 przez happers

już natknąłem się na flexboxa tutaj - raczej chcę coś prostego i co zadziała, bo już przeglądałem wiele stron i nie ma tego czego oczekuję np - w tej chwili jestem tu:

Both Horizontally and Vertically

https://css-tricks.com/centering-css-complete-guide/

tyle, że efekt mi nie pasuje, bo znowu nie jest tak jak szukam i oczekuję, a chciałbym, żeby to białe tło było wycentrowane...

komentarz 24 stycznia 2018 przez Daniel90 Pasjonat (17,970 p.)

Daj kod jak to wygląda, najlepiej w jakimś jsfiddle czy codepen.

komentarz 24 stycznia 2018 przez happers Nowicjusz (150 p.)

plik HTML:

<head>
<link rel="Stylesheet" type="text/css" href="styl.css" />
</head>
<main>
  
  <div>
     I'm a block-level element a fixed height and width, centered vertically within my parent.
  </div>
  
</main>

plik CSS:

body {
  background: #f06d06;
  font-size: 80%;
  padding: 20px;
}

main {
  position: relative;
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}

komentarz 24 stycznia 2018 przez Daniel90 Pasjonat (17,970 p.)

Chodziło mi raczej o kod tej ramki z logowaniem.

https://jsfiddle.net/h8mr1phy/

komentarz 24 stycznia 2018 przez happers Nowicjusz (150 p.)

tak szczerze, to tych ramek jeszcze nie mam, bo póki co to szukam rozwiązania które by centrowało w ogóle. chyba coś zmodziłem i wydaje się, że działa...

body {
  background: #f06d06;
  font-size: 80%;
  padding: 20px;
}

main {
  #position: relative;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  background: white;
  height: 200px;
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}

main div {
  background: black;
  color: white;
  width: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}