---
# System prepended metadata

title: CSS 置中
tags: [Css]

---

---
tags: Css
---
# CSS 置中
###### tags: `css`
## Grid
```python=css=1
.center {
  display: grid;
  place-content: center;
}
```

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Grid center" src="https://codepen.io/juest/embed/YzGRaYN?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/juest/pen/YzGRaYN'>CSS Grid center</a> by gt.juest
  (<a href='https://codepen.io/juest'>@juest</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


## Flex
```python=css=1
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
```

<iframe height="351" style="width: 100%;" scrolling="no" title="CSS Grid center" src="https://codepen.io/juest/embed/oNzQqZb?height=351&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/juest/pen/oNzQqZb'>CSS Grid center</a> by gt.juest
  (<a href='https://codepen.io/juest'>@juest</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


## Flex
```python=css=1
.center {
  display: flex;
}
.center > div {
  margin: auto;
}
```

<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Flex center2" src="https://codepen.io/juest/embed/yLaQKqr?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/juest/pen/yLaQKqr'>CSS Flex center2</a> by gt.juest
  (<a href='https://codepen.io/juest'>@juest</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## Position
```python=css=1
.center {
  poition: relative;
  width: 100%;
  height: 100vh;
}
.center > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS Position center" src="https://codepen.io/juest/embed/JjReLxK?height=265&theme-id=dark&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/juest/pen/JjReLxK'>CSS Position center</a> by gt.juest
  (<a href='https://codepen.io/juest'>@juest</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

