内容垂直水平居中轻松搞定，全面总结css居中方法大全

CSS中内容水平居中、垂直居中是经常有的需求，在不同的场景，居中的方式也不同，此篇文章就总结下CSS居中的各种方法。

一、垂直居中

1. 绝对定位法

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

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

2. 柔性布局法

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

3. margin法

.container {
  margin: 0 auto;
}

4. padding法

.container {
  padding: 20px 0;
}

.content {
  display: block;
}

若父元素的height高度没有写，则默认是子元素撑开的高度，此时子元素若想垂直居中，直接在父元素内：padding: 20px 0;即可。

二、水平居中

1. text-align法

.container {
  text-align: center;
}

2. margin法

.container {
  margin: 0 auto;
}

3. flex布局法

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

4. padding法

.container {
  padding: 0 20px;
}

.content {
  display: inline-block;
}

三、水平垂直居中

1. 绝对定位法

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

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

2. 柔性布局法

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

3. padding法

.container {
  padding: 20px;
}

.content {
  display: block;
}

以上就是CSS中内容垂直居中、水平居中、水平垂直居中的所有方法。