Wyśrodkowanie elementów w CSS

Wyśrodkowanie w poziomie

Wyśrodkowanie elementów w poziomie jest stosunkowo proste i możliwe na kilka sposobów.

Wyśrodkowanie tekstu w poziomie text‐align

Właściwość text‐align z wartością center umożliwia wyśrodkowanie tekstu w poziomie.

Przykład

<div class=“container”>
  <p>Hello World!</p>
</div>

.container {
    width: 600px;
    height: 300px;
    outline: dashed 1px black;
}

p {
    /* Center text horizontally*/
    text‐align: center;
}

Wyśrodkowanie elementu w poziomie margin: auto

W tym celu wykorzystujemy właściwość margin z wartością auto.

Przykład

<div class=“container”>
  <div class=“child”></div>
</div>

.container {
  width: 400px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
    width: 80px;
    height: 80px;
    background‐color: tomato;
    /* Center horizontally*/
    margin: 0 auto;
}

Wyśrodkowanie elementu w poziomie z wykorzystaniem Flexbox

Wyśrodkowanie elementu w poziomie z użyciem Flexbox jest możliwe z użyciem właściwości: display: flex i justify‐content: center.

Przykład

<div class=“container”>
  <div class=“child”></div>
</div>

.container {
  width: 400px;
  height: 200px;
  display: flex;
  justify‐content: center;
}

.child {
    width: 80px;
    height: 80px;
    background‐color: tomato;
}

Wyśrodkowanie w pionie

Wyśrodkowanie elementów w pionie do niedawna mogło przysparzać wielu problemów i wymagało zastosowania wielu właściwości z odpowiednimi wartościami.

Wyśrodkowanie w pionie z zastosowaniem pozycjonowania i ujemnego marginesu

W tym sposobie aby wyśrodkować element w pionie musimy znać jego wysokość.

Przykład

<div class=“container”>
  <div class=“child”></div>
</div>

.container {
  width: 400px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
    width: 80px;
    height: 80px;
    background‐color: tomato;
    /* Center vertically */
    position: absolute;
    top: 50%;
    margin‐top: ‑25px; /* Half this element’s height */
}

Wyśrodkowanie w pionie z zastosowaniem transform i transalte

Możemy zastosować tą metodę nawet gdy nie znamy wysokości pozycjonowanego w pionie elementu.

Przykład

<div class=“container”>
  <div class=“child”></div>
</div>

.container {
  width: 400px;
  height: 200px;
  outline: dashed 1px black;
  /* Setup */
  position: relative;
}

.child {
    width: 80px;
    height: 80px;
    background‐color: tomato;
    /* Center vertically */
    position: absolute;
    top: 50%;
    transform: translate(0, ‑50%);
}

Wyśrodkowanie w pionie z zastosowaniem Flexbox

Wyśrodkowanie elementu w poziomie z użyciem Flexbox jest możliwe z użyciem właściwości: display: flex i align‐items: center.

<div class=“container”>
  <div class=“child”></div>
</div>

.container {
    width: 400px;
    height: 200px;
    outline: dashed 1px black;
    /* Center vertically */
    display: flex;
    align‐items: center;
}

.child {
    width: 80px;
    height: 80px;
    background‐color: tomato;
}

Wyśrodkowanie elementu w pionie i poziomie

Wyśrodkowanie elementu w pionie i poziomie z zastosowanie pozycjonowania i negatywnych marginesów

W tym sposobie, podobnie jak w przypadku wyśrodkowania elementu w pionie, musimy znać wymiary pozycjonowanego elementu.

<div class=“container”>
    <div class=“child”></div>
</div>

.container {
    width: 400px;
    height: 200px;
    outline: dashed 1px black;
    /* Setup */
    position: relative;
}

.child {
    width: 80px;
    height: 80px;
    background‐color: tomato;
    /* Center vertically and horizontally */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: ‑40px 0 0 ‑40px; /* Apply negative top and left margins */
}

Wyśrodkowanie elementu w pionie i poziomie z zastosowanie transform i translate

Ta metoda umożliwia wyśrodkowanie elementu nawet gdy nie znamy jego wymiarów.

<div class=“container”>
    <div class=“child”></div>
</div>

.container {
    width: 400px;
    height: 200px;
    outline: dashed 1px black;
    /* Setup */
    position: relative;
}

.child {
    width: 80px;
    height: 80px;
    background‐color: tomato;
    /* Center vertically and horizontally */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, ‑50%)
}

Wyśrodkowanie w pionie i poziomie z zastosowaniem Flexbox

Flexbox znacznie ułatwia wyśrodkowanie elementu.

<div class=“container”>
    <div class=“child”></div>
</div>

.container {
    width: 400px;
    height: 200px;
    outline: dashed 1px black;
    /* Setup */
    display: flex;
    justify‐content: center;
    align‐items: center;
}

.child {
    width: 80px;
    height: 80px;
    background‐color: tomato;
}