> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/layout/center/flex.md).

# center with "flex"

## 重點 <a href="#keys" id="keys"></a>

```css
/* CSS reset */
:root {
    box-sizing: border-box;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: inherit;
}

/* body */
body {

    /* flex */
    display: flex;
    justify-content: center;    /* ⭐️ 水平置中 */
    align-items: center;        /* ⭐️ 垂直置中 */
    
    min-height: 100vh;          /* ⭐️ 強迫使用全部高度 */
}
```

## 實例 <a href="#example" id="example"></a>

{% tabs %}
{% tab title="Result" %}
{% embed url="<https://codepen.io/lochiwei/pen/MWmzzee>" %}

{% endtab %}

{% tab title="CSS" %}

```css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} 

.container {
  
  /* ⭐️ flex */
  display: flex;
  justify-content: center;  /* ⭐️ 水平置中 */
  align-items: center;      /* ⭐️ 垂直置中 */
  
  height: 400px;
  border: 2px solid #006100;
  background-color: orange;
}

.centered-element {
  margin: 1em;;
  padding: 1em;
  border: 1px solid black;
  background-color: rgba(255,255,255, 0.5);
}
```

{% endtab %}
{% endtabs %}

## 參考 <a href="#ref" id="ref"></a>

{% tabs %}
{% tab title="📗 文章" %}

* [CSS Vertical Align - How to Center a Div, Text, or an Image](https://www.freecodecamp.org/news/css-vertical-align-how-to-center-a-div-text-or-an-image-example-code/) (freeCodeCamp)
  {% endtab %}
  {% endtabs %}