Skip to main content

水平居中

行内元素水平居中​

如果被设置元素为文本、图片等行内元素时，通过给父元素设置 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;
}

定宽块状元素水平居中​

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

<div>我是定宽块状元素，我要水平居中显示。</div>
div{
  <!-- 如果不设定宽度则无法居中显示 -->
  width: 200px;
  border:1px solid red;
  margin:20px auto;
}

已知宽高盒子水平垂直居中​

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

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

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

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -50px 0 0 -50px;
}

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

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

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

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

  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}