Cztery sposoby centrowania elementu w div

Cztery Pięć sposobów centrowania elementu w div.
Najpierw przygotujemy style dla html, mały reset nie jest zły 😉

* {
  padding: 0;
  margin: 0;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  overflow: hidden;
}

oraz html

<div class="wrapper">
<p></p>
</div>

A teraz konkrety:

I. Podstawowy i zawsze działający styl.

.wrapper {
  display: block;
  width: 100%;
  height: 100%;
}

p {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: blue;
  width: 100px;
  height: 100px;
  margin: auto;
}

II. Przykład z użyciem flex

.wrapper {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

p {
  background-color: blue;
  width: 100px;
  height: 100px;
}

III. Styl oparty o transform.

.wrapper {
  display: block;
  width: 100%;
  height: 100%;
}

p {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  background-color: blue;
}

IV. Przedostatni styl oparty o grid. Niestety grid jest słabo wspierany ale jeżeli nie obchodzą nas starsze przeglądarki w szczególności z serii IE to czemu nie użyć 🙂

.wrapper {
  display: grid;
  width: 100%;
  height: 100%;
}

p {
  width: 100px;
  height: 100px;
  align-self: center;
  justify-self: center;
  background-color: blue;
}

V. Ostatni sposób centrowania.

.wrapper {
  width: 100%;
  height: 100%;
}

p {
  position: absolute;
  inset: 40px;
  background-color: blue;
}