# Jak wyśrodkować elementy w pionie i poziomie?

### Jak wyśrodkować elementy w pionie i poziomie?

Częstym problemem w kodowaniu layoutu strony jest środkowanie elementów. Poinstruowanie przeglądarki, aby umieściła nasz wybrany element w konkretnym miejscu, wydaje się dość skomplikowanym zadaniem.

W tym rozdziale postaramy się pokazać Wam, że nie jest to wcale takie trudne i wystarczy poznać kilka prostych technik, aby stać się mistrzem środkowania w CSS.

#### Środkowanie w poziomie

To, jakiej techniki środkowania w poziomie użyć zależy w dużej mierze od tego, czy nasz element jest elementem blokowym czy liniowym (lub liniowo-blokowym).

* Jak wyśrodkować element blokowy? Wystarczy nadać mu określoną szerokość oraz automatycznie wyliczone marginesy po lewej i prawej.

```markup
<div class="container">
  <div class="center-me">
    Jestem elementem blokowym
  </div>
</div>
```

```css
.center-me {
  background: lightgreen;
  height: 100px;
  width: 300px;
  margin: 0 auto; /* Środkuję blokowy element */
}
```

&#x20;Jestem elementem blokowym

* Jeśli nasz element jest liniowy (lub liniowo-blokowy), sztuczka z automatycznymi marginesami nie zadziała. Należy go wtedy potraktować jako zwykły tekst i wycentrować w odpowiedni temu sposób.

```markup
<div class="container">
  <div class="center-me">
    Jestem elementem liniowo-blokowym
  </div>
</div>
```

```css
/*
  Ważne, aby wyśrodkowanie
  zdefiniować na elemencie otaczającym
*/
.container {
  text-align: center;
}

.center-me {
  display: inline-block;
  background: lightgreen;
  height: 100px;
  width: 300px;
}
```

&#x20;Jestem elementem liniowo-blokowym

#### Środkowanie w pionie

Środkowanie elementów w pionie jest nieco bardziej skomplikowane, niż środkowanie w poziomie. Techniki środkowania w pionie dla elementów liniowych wymagają już nieco wprawy i zaawansowania w CSS, to samo dotyczy elementów blokowych, których wymiary nie są określone wprost. Wszystkich ambitnych, którzy chcą zapoznać się z tajnikami środkowania, odsyłamy do [artykułu na CSS Tricks](https://css-tricks.com/centering-css-complete-guide/).

Dowiedzmy się zatem, w jaki sposób wyśrodkować element blokowy o znanej wysokości.

```markup
<div class="container">
  <div class="center-me">
    Jestem wyśrodkowany w pionie
  </div>
</div>
```

```css
.container {
  position: relative;
}

.center-me {
  background: crimson;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  margin-top: -100px; /* 200px / 2 = 100px */
}
```

&#x20;Jestem wyśrodkowany w pionie

Powyższa technika bazuje na pozycjonowaniu. Aby wyśrodkować element w pionie, musimy najpierw umieścić jego górną krawędź 50% od góry kontenera. W tym momencie element nie będzie jeszcze wizualnie wyśrodkowany, należy go wtedy przesunąć do góry o połowę jego wysokości. Przydatne tu okazują się ujemne marginesy.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-6/jak-wysrodkowac-elementy-w-pionie-i-poziomie.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.