CSS水平垂直居中(最常见的三种方案flex、grid、absolute)-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS水平垂直居中(最常见的三种方案flex、grid、absolute)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

本文简单介绍一下现代 CSS 中最常见的三种水平垂直居中方案。

html：

<div class="container">
  <div class="content"></div>
</div>

css：

.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

Flex 布局

方案1：父元素设置 flex 布局，并设置主轴以及交叉轴的对齐方式：

.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

方案2：父元素设置 flex 布局，子元素设置 margin: auto：

.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: flex;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    margin: auto;
  }
}

Grid 布局

父元素设置 grid 布局，以及 place-items: center。place-items 是 align-items 和 justify-items 的简写形式。

Grid 的兼容性不如 Flex，对于一些比较老的浏览可能不太支持。

.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  display: grid;
  place-items: center;

  .content {
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

绝对定位 absolute

使用绝对定位会使元素脱离文档流，一般常用于弹窗、对话框等。

父元素设置相对定位，子元素设置绝对定位，设置 top、left 以及 transform。

.container {
  position: relative;
  width: 500px;
  height: 500px;
  border: 1px solid #000;

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: #ccc;
  }
}

top和left属性都设置为50%。这会将.content元素的左上角定位到其父元素（.container）的中心。transform: translate(-50%, -50%);被应用到.content元素上。这会将.content元素自身向左和向上移动其自身宽度和高度的50%，从而使得.content元素的中心与其父元素的中心对齐，实现了居中。文章来源地址https://www.toymoban.com/news/detail-792288.html

到了这里，关于CSS水平垂直居中(最常见的三种方案flex、grid、absolute)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！