css居中完整版

是时候对 css 居中的各种方式来波总结了！下面是一提到居中就应该联想到的关键属性：

水平居中

行内元素/行内块级元素特有

1
2
3

.box {
  text-align: center;
}

块级元素特有

1
2
3

.box {
  margin: 0 auto;
}

两者都可使用

法一

.parent {
  position: relative;
}
.box {
  position: absolute;
  left: 50%;
  width: 200px;
  margin-left: -100px;
}

法二

.parent {
  position: relative;
}
.box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

法三

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

垂直居中

方法一

.parent {
  height: auto;
  padding: 100px 0;
}

方法二

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

方法三

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

方法四

.parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

方法五

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

方法六

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

方法七

.parent {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

方法八

ghost element

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: ' ';
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}