Skip to main content

水平居中方案

<div class="container">
  <div class="content">要水平居中的内容</div>
</div>
.container {
  width: 700px;
  height: 200px;
  background-color: #a7dbd8;
}

.content {
  width: 30%;
  height: 30%;
  text-align: center;
  background-color: #2fb45a;
}
Details

使用 Flexbox​

flex 布局是一种弹性布局，可以让元素在容器中水平、垂直居中。 flex 布局的 justify-content 属性可以实现水平居中，align-items 属性可以实现垂直居中。

<div class="container">
  <div class="content">要水平居中的内容</div>
</div>
.container {
  width: 700px;
  height: 200px;
  background-color: #a7dbd8;

  display: flex;
  justify-content: center;
}

.content {
  width: 30%;
  height: 30%;
  text-align: center;
  background-color: #2fb45a;
}
Details

使用绝对定位​

绝对定位 position: absolute; 是一种相对于最近的非 static 定位祖先元素进行定位的方式。绝对定位的元素会脱离文档流，不占据空间。

<div class="container">
  <div class="content">要水平居中的内容</div>
</div>
.container {
  width: 700px;
  height: 200px;
  background-color: #a7dbd8;

  position: relative;
}

.content {
  width: 30%;
  height: 30%;
  text-align: center;
  background-color: #2fb45a;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 如果子盒子宽度固定，可以使用 margin-left: -(width/2)px; */
}
Details

使用行内元素文本居中​

如果被设置元素为文本、图片等行内元素 (display: inline-block | inline-flex | inline-grid | inline-table 也含有内联样式特性) 时，通过给父元素设置 text-align: center; 来实现水平居中。

<div class="container">
  <div class="content">要水平居中的内容</div>
</div>
.container {
  width: 700px;
  height: 200px;
  background-color: #a7dbd8;

  text-align: center;
}

.content {
  width: 30%;
  height: 30%;
  text-align: center;
  background-color: #2fb45a;

  display: inline-block;
}
Details

使用 Grid 布局​

Grid 布局是一种二维布局方式，可以让元素在容器中水平、垂直居中。 grid 布局的 justify-self 属性可以实现水平居中，align-self 属性可以实现垂直居中。

<div class="container">
  <div class="content">要水平居中的内容</div>
</div>
.container {
  width: 700px;
  height: 200px;
  background-color: #a7dbd8;

  display: grid;
}

.content {
  width: 30%;
  height: 30%;
  text-align: center;
  background-color: #2fb45a;

  justify-self: center;
}
Details

根据宽高划分​

行内元素水平居中​

如果被设置元素为文本、图片等行内元素 (display: inline-block | inline-flex | inline-grid | inline-table 也含有内联样式特性) 时，通过给父元素设置 text-align: center; 来实现水平居中。

<div class="txtCenter">我想要在父容器中水平居中显示。</div>

<div class="imgCenter">
  <img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" alt="imgcenter" referrerpolicy="no-referrer" />
</div>
div {
  border: 1px solid red;
  margin: 20px;
}
.txtCenter {
  text-align: center;
}
.imgCenter {
  text-align: center;
}
Details

定宽块状元素水平居中​

定宽块状元素（块状元素的宽度 width 为固定值）：通过设置左右 margin 为 auto (margin:20px auto;) 来实现水平居中。

<div class="father">
  <div class="son">我是定宽块状元素，我要水平居中显示。</div>
</div>
.father {
  background-color: #a7dbd8;
}

.son {
  width: 300px;
  margin: 20px auto;
  border: thick solid red;
}
Details

已知宽高盒子水平居中​

通常使用绝对定位 position 实现盒子水平居中。

  • 利用父元素设置相对定位 relative，子元素设置绝对定位 absolute，那么子元素就是相对于父元素定位的特性。子绝父相
  • 然后给子元素设置左偏移的值为 50%，是元素的左上角在父元素中心点的位置。
  • 最后用 margin 给左负的自身宽高的一半，就能达到水平居中的效果。
<div class="father">
  <div class="son"></div>
</div>
.father {
  margin: 20px;
  height: 300px;
  background-color: #a7dbd8;
  position: relative;
}

.son {
  width: 100px;
  height: 100px;
  background-color: #2fb45a;

  position: absolute;
  left: 50%;
  /* top: 50%; 垂直居中 */

  margin: 0 0 0 -50px; /* margin: -50px 0 0 -50px; 垂直居中 */
}
Details

宽高不定的盒子水平居中​

未知宽高实现盒子水平居中，通常使用定位 position 以及位移 translate 完成。

  • 利用父元素设置相对定位 relative，子元素设置绝对定位 absolute，那么子元素就是相对于父元素定位的特性。⌈子绝父相⌋
  • 子元素设置左偏移的值为 50%。
  • 然后再用 css3 属性 translate 位移，给左位移 -50% 距离 (transform: translateX(-50%);)，就能达到水平居中的效果。
<div class="father">
  <div class="son"></div>
</div>
.father {
  margin: 20px;
  height: 300px;
  background-color: #a7dbd8;
  position: relative;
}

.son {
  width: 30%;
  height: 30%;
  background-color: #2fb45a;

  position: absolute;

  /* top: 50%; 垂直居中 */
  left: 50%;

  transform: translateX(-50%);
  /* transform: translateY(-50%); 垂直居中 */
}
Details