CSS居中对齐的几种方式

Posted 2021-09-29 浅墨

一、水平居中
1、在块级父容器中让行内元素或者行内块元素居中，只需使用 text-align: center，这种方法可以让 inline/inline-block/inline-table/inline-flex 居中。

<div class="container">
  <span class="content">水平居中</span>
</div>

.container {
  text-align: center;
}

2、margin: 0 auto 或者 margin: auto，可以让块级父容器中的块级元素居中，对于行内元素，则需结合display: table使用。

<div class="container">
  <span class="content">水平居中</span>
</div>

.content {
  margin: 0 auto;
  display: table;
}

3、脱离文档流的水平居中。内部div固定宽度，设置left为50%，接着使用负边距的方式调整，将margin-left设置为负的宽度的一半。

<div class="container">
  <div class="content">水平居中</div>
</div>

.container {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  width: 100px;
  margin-left: -50px;
}

也可以将 margin-left: -50px 换成 transform: translateX(-50%)，这种方式可以不用已知元素宽度。

4、弹性盒子。

<div class="container">
  <div class="content">水平居中</div>
</div>

.container {
  display: flex;
  justify-content: center;
}

或者

.container {
  display: flex;
  flex-direction: column;
}
.content {
  align-self: center;
}

二、垂直居中
1、行内元素的垂直居中把height和line-height的值设置成一样的即可。

<div class="container">
  <span class="content">垂直居中</span>
</div>

.container {
  height: 100px;
  line-height: 100px;
}

2、display: table-cell，可以使高度不同的元素都垂直居中。

<div class="container">
  <div class="content">垂直居中</div>
</div>

.container {
  display: table-cell;
  vertical-align: middle;
}

3、脱离文档流的垂直居中。内部div固定高度，设置top为50%，接着使用负边距的方式调整，将margin-top设置为负的高度的一半。

<div class="container">
  <div class="content">垂直居中</div>
</div>

.container {
  position: relative;
}
.content {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

也可以将 margin-top: -50px 换成 transform: translateY(-50%)，这种方式可以不用已知元素高度。

4、弹性盒子。

<div class="container">
  <div class="content">垂直居中</div>
</div>

.container {
  display: flex;
  align-items: center;
}

或者

.container {
  display: flex;
}
.content {
  align-self: center;
}

三、水平垂直居中
可以将前面几种方式结合起来实现水平垂直居中。

1、text-align: center 与 line-height 结合使用。

<div class="container">
  <span class="content">水平垂直居中</span>
</div>

.container {
  text-align: center;
  line-height: 100px;
}

2、text-align: center 与 display: table-cell 结合使用。

<div class="container">
  <div class="content">水平垂直居中</div>
</div>

.container {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.content {
  display: inline-block;
}

3、display: table-cell 与 margin: 0 auto 结合使用，如果内部元素是行内元素，可以结合display: table使用。

<div class="container">
  <div class="content">水平垂直居中</div>
</div>

.container {
  display: table-cell;
  vertical-align: middle;
}
.content {
  margin: 0 auto;
}

4、脱离文档流的居中方式

<div class="container">
  <div class="content">水平垂直居中</div>
</div>

.container {
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
}

或者

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

或者

.content {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

5、弹性盒子。

<div class="container">
  <div class="content">水平垂直居中</div>
</div>

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

或者

.container {
  display: flex;
}
.content {
  margin: auto;
}

6、CSS3的display: box属性结合box-pack: center（水平），box-align: center（垂直）使用。目前主流浏览器都不支持，各浏览器通过相应的私有属性支持，如下代码：

<div class="container">
  <div class="content">水平垂直居中</div>
</div>

.container {
  /* Internet Explorer 10 */
  display: -ms-flexbox;
  -ms-flex-pack: center;
  -ms-flex-align: center;

  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;

  /* Safari, Opera, and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}

7、使用伪类:before

<div class="container">
  <div class="content">水平垂直居中</div>
</div>

.container {
  text-align: center;
}
.container:before {
  content: "";
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.content {
  display: inline-block;
}