# Középre rendezés

## Vízszintes középre rendezés külső margóval.

A következő technikával [blokkos megjelenítésű](../../css/doboz-modell#toembszeru-vagy-blokkos-elemek-jellemzoi) elemeket lehet a szülő elemükben középre rendezni. A vízszintes középre rendezéshez `auto` értéket kell beállítani a jobb és bal oldali [`margin`](../../css/doboz-modell#kuelso-margo-margin) (külső margó) tulajdonságnak.&#x20;

```
div {
    margin-left: auto;
    margin-right: auto;
}
```

![](https://4266704503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LNfhge3bZW-4Qpjzwtx%2F-LS9y2LTSLBSZn8frsgA%2F-LSAByo7Ph0o7UaJWve4%2Fcenter-margin-auto.png?alt=media\&token=884b06f9-a9db-42b5-b9a8-27f1df321049)

Az elem [szélességét](../../css/doboz-modell#tartalom-content) is szükséges megadni, ez lehet relatív szélesség (százalék, vagy viewport), vagy fix érték például pixel (ha nincs megadva szélesség az elem teljesen kitölti a szülő elemet).

{% tabs %}
{% tab title="center.html" %}
```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Center block element</title>
    <link rel="stylesheet" href="center.css">
</head>
<body>
    <main>
        <div></div>
    </main>
</body>
</html>
```
{% endtab %}

{% tab title="center.css" %}
```css
main {
	padding: 30px 0;
	background-color: #ffec99;
}

div {
	margin-left: auto;
	margin-right: auto;
	
	width: 200px;
	height: 200px;
	background-color: #f03e3e;
}
```
{% endtab %}
{% endtabs %}

Ez a technika csak [blokkos elemekkel](../../css/doboz-modell#toembszeru-vagy-blokkos-elemek-jellemzoi) működik, `display: inline` (szövegközi) elemekre hatástalan (nincs külső margójuk).

A technika úsztatott elemek esetében nem működik.

{% embed url="https://codepen.io/_lacus/pen/LXrGEK" %}
