如何在 CSS 中将 Div 居中

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《如何在 CSS 中将 Div 居中》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

弹性盒：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

网格

.container {
  display: grid;
  place-items: center;
  height: 300px;
}

弹性保证金

.container {
  display: flex;
  height: 300px;
}
.centered-div {
  margin: auto;
}

绝对定位

.container {
  position: relative;
  height: 300px;
}
.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

自动保证金

.container {
  height: 300px;
}
.centered-div {
  width: 200px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translatey(-50%);
}

网格模板

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr auto 1fr;
  height: 300px;
}
.centered-div {
  grid-column: 2;
  grid-row: 2;
}

终于介绍完啦！小伙伴们，这篇关于《如何在 CSS 中将 Div 居中》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！