---
tags: Css
---
# CSS 置中
###### tags: `css`
## Grid

.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

.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

.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

.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>