地狱猫

垂直居中

单行文本

若元素是单行文本, 则可设置 line-height 等于父元素高度

<style>
  body{
    background-color: #e9e9e9;
  }
  .parent{
    background-color: yellow;
    width: 200px;
    height: 200px;
  }
  .child{
    line-height: 200px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
  <div class="parent">
    <div class="child">行内元素1</div>
  </div>
1
2
3

效果图

元素高度不定

  1. 可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle; 优点

元素高度可以动态改变, 不需再CSS中定义, 如果父元素没有足够空间时, 该元素内容也不会被截断.

缺点

IE6~7, 甚至IE8 beta中无效.

<style>
  body{
    background-color: #e9e9e9;
  }
  .parent{
    width: 200px;
    height: 200px;
    background-color: yellow;
    display: table;
  }
  .child{
    display:table-cell;
    vertical-align:middle;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <div class="parent">
    <div class="child">行内元素1</div>
  </div>
1
2
3

效果图 2. flex display: flex;align-items: center; 父元素做如下设置即可保证子元素垂直居中 优点

  • 内容块的宽高任意, 优雅的溢出.

  • 可用于更复杂高级的布局技术中. 缺点

  • IE8/IE9不支持

  • 需要浏览器厂商前缀

  • 渲染上可能会有一些问题

<style>
  body{
    background-color: #e9e9e9;
  }
  .parent{
    display: flex;
    align-items: center;
  }
</style>
1
2
3
4
5
6
7
8
9
  <div class="parent">
    <div class="child">行内元素1</div>
  </div>
1
2
3

效果图 3.flex display: flex;flex-direction: column;justify-content: center; 父元素做如下设置即可保证子元素垂直居中

<style>
  body{
    background-color: #e9e9e9;
  }
  .parent{
    width: 300px;
    height: 300px;
    background-color: yellow; 
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .child {
    width: 100px;
    height: 100px;
    background: lightblue;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <div class="parent">
    <div class="child">行内元素1</div>
  </div>
1
2
3

效果图 4. transform 设置父元素相对定位(position:relative), 子元素如下css样式

<style>
  body{
    background-color: #e9e9e9;
  }
  .parent{
    width: 200px;
    height: 200px;
    background-color: yellow;
  
    position: relative;
    
  }
  .child{
    position:absolute;
    top:50%;
    transform: translate(0,-50%);
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <div class="parent">
    <div class="child">行内元素1</div>
  </div>
1
2
3

效果图 5. 使用 CSS Grid

<style>
  body{
    background-color: #e9e9e9;
  }
  .parent{
    width: 300px;
    height: 300px;
    background-color: yellow; 

    display: grid;
  }
  .two {
    background: orange;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <div class="parent">
    <div class="one"></div>
    <div class="two">target item</div>
    <div class="three"></div>
  </div>
1
2
3
4
5

效果图

元素高度固定

  1. 设置父元素相对定位(position:relative), 子元素如下css样式
  .parent{
    width: 200px;
    height: 200px;
    background-color: yellow;
  
    position: relative; 
  }
  .child{
    position:absolute;
    top:50%;
    height:100px;
    margin-top:-50px;
    background-color: lightblue;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <div class="parent">
    <div class="child">行内元素1</div>
  </div>
1
2
3

效果图 2. 设置父元素相对定位(position:relative), 子元素如下css样式

  .parent{
    width: 200px;
    height: 200px;
    background-color: yellow;
  
    position: relative;
    
  }
  .child{
    position:absolute;
    height:100px;
    top:0;
    bottom:0;
    margin:auto 0;
    background-color: lightblue;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <div class="parent">
    <div class="child">行内元素1</div>
  </div>
1
2
3

效果图 3. 使用padding实现子元素的垂直居中 注意 父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确垂直居中。

  .parent{
    width: 200px;
    background-color: yellow;
  
    padding: 100px 0;
    
  }
  .child{
    width: 200px;
    height: 100px;
    background-color: lightblue;
  }
1
2
3
4
5
6
7
8
9
10
11
12
  <div class="parent">
    <div class="child">行内元素1</div>
  </div>
1
2
3

效果图 3. 设置第三方基准 首先设置一个高度等于父元素高度一半的第三方基准元素，这时该基准元素的底边线就是父元素纵向上的中分线，做完这些之后再给要垂直居中的元素设置一个 margin-top 属性，值的大小是它自身高度的一半取负，则实现垂直居中。

  .parent{
    width: 300px;
    height: 300px;
    background-color: yellow;   
  }
  .base {
    height: 50%;
    background: orange;
  }
  .child{
    height: 100px;
    background: lightblue; 
    margin-top: -50px;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <div class="parent">
    <div class="base">行内元素1</div>
    <div class="child">行内元素2</div>
  </div>
1
2
3
4

效果图 4. 使用 line-height 和 vertical-align 对图片进行垂直居中

  .parent{
    width: 300px;
    height: 300px;
    background-color: yellow; 

    line-height: 300px;  
  }
  img {
    width: 200px;
    height: 200px;

    vertical-align: middle;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
  <div class="parent">
    <div class="parent">
      <img src="./block.png" alt="">
    </div>
  </div>
1
2
3
4
5

效果图

← 单行文本溢出省略展示→