CSS 垂直水平居中的几种方法

本文由简悦 SimpRead 转码，原文地址 juejin.cn

作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到 “使用 css 居中” 的效果，今天就写一篇关于 css 垂直水平居中的几种方法。

作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到 “使用 css 居中” 的效果，今天就写一篇关于 css 垂直水平居中的几种方法。

栗子 1：从最简单的水平居中开始

1
2


margin: 0 auto;
复制代码

块级元素使用 margin: 0 auto; 可以在父元素的中间位置居中，不过要记得设置块级元素的宽高。 HTML 部分

1
2
3
4
5
6


<div>
  <div>
    <p>CSS</p>
  </div>
</div>
复制代码

CSS 部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


.example1 {
  width: 200px;
  height: 200px;
  background-color: orange;
}
.example1 p {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
  line-height: 100px;
  text-align: center;
}
复制代码

栗子 2：元素水平垂直居中

position 元素已知宽度绝对定位 + margin 反向偏移

1
2
3
4
5


<div>
    <div>
    </div>
</div>
复制代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


.wrap {
    position: relative;
    background-color: orange;
    width: 300px;
    height: 300px;
}
.example2 {
    background-color: red;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}
复制代码

position transform 元素未知宽度如果元素未知宽度，只需将上面example2中的 margin: -50px 0 0 -50px; 替换为：transform: translate(-50%,-50%) ;

栗子 3： flex 布局

HTML 同上面，附 css 代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


.warp {
  background-color: #FF8C00;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center; /*使子项目水平居中*/
  align-items: center; /*使子项目垂直居中*/
}
.example3 {
  background-color: #F00;
  width: 100px;
  height: 100px;
}
复制代码

另外一种就是 table-cell布局了,这个我就不介绍了，因为不想介绍。

栗子 4：绝对布局

div 使用绝对布局，设置 margin:auto; 并设置 top、left、right、bottom 的值相等即可，不一定要都是 0。 HTML 部分

1
2
3
4
5
6


<div>
  <div>
    居中显示
  </div>
</div>
复制代码

CSS 部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


.warp {
  position: relative;
  background-color: orange;
  width: 200px;
  height: 200px;
}
.example3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  width: 100px;
  height: 100px;
  margin: auto;
}
复制代码

栗子 5：给子元素相对定位，在通过 translaY（）得到垂直居中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


.warp {
  position: relative;
  background-color: orange;
  width: 200px;
  height: 200px;
}
.example3 {
  position: relative;
  top:50%;
  transform:translateY(-50%);
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}
复制代码

栗子 6：利用 inline-block 的 vertical-align: middle 去对齐 after 伪元素

利用 inline-block 的 vertical-align:middle 去对齐 after 伪元素实现效果更加好，居中块的尺寸可以做包裹性、自适应内容，兼容性也相当好。缺点是水平居中需要考虑 inline-block 间隔中的留白（代码换行符遗留问题。）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


.warp {
    text-align: center;
    overflow: auto;
    width: 200px;
    height: 200px;
    background-color: orange;
}
.example3 {
    display: inline-block;
    background-color: red;
    vertical-align: middle;
    width: 100px;
    height: 100px;
}

.warp:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-left: -0.25em;
    /* To offset spacing. May vary by font */
}
复制代码

栗子 7：display: flex-box

flexbox 布局。此乃布局终极大法，专治各种布局定位难题！优点：能解决各种排列布局问题.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


.warp {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: orange;
}
 
.example3 {
  width: 100px;
  height: 100px;
  background-color: red;
}
复制代码

图片居中的栗子 1：

1
2
3
4
5
6


<div>
  <div>
    <img src="xxxx" alt="">
  </div>
</div>
复制代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


.warp {
  width: 200px;
  height: 200px;
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
}
.example3 img {
  width: 100px;
  height: 100px;
  background-color: blue;
}
复制代码

图片居中的栗子 2：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


.warp {
  width: 200px;
  height: 200px;
  background-color: orange;
  line-height: 200px;
    text-align: center;
}
.example3 img {
  width: 100px;
  height: 100px;
  background-color: blue;
  vertical-align: middle;
}
复制代码

就写到这里了，后续在遇到的话会继续添加的。。

如果小伙伴有别的写法，可以在评论区留言，我会一一回复的。

动动你的小手，关注一下我的订阅号，不定时推送前端干货，和你在学习前进的道路上，一同披荆斩棘，我与你同在。