孔乙己： CSS垂直居中有5种写法

骆言

已于 2022-11-12 22:08:17 修改

阅读量535

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发 🛸 文章标签： css 前端 html 垂直居中

于 2019-12-09 17:36:06 首次发布

本文链接：https://blog.csdn.net/LawssssCat/article/details/103461959

前端开发 🛸 专栏收录该内容

60 篇文章

订阅专栏

本文详细介绍了五种使用CSS实现元素垂直居中的方法，包括display:flex、display:grid、transform:translateY(-50%)、display:table-cell以及ghost element技巧。每种方法都附带了代码示例，帮助读者理解和掌握不同场景下的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考：
https://www.w3schools.com/howto/howto_css_center-vertical.asp
https://css-tricks.com/centering-in-the-unknown/

文章目录

在这里插入图片描述

# display: flex

方便、直观
~~兼容性差~~

<style>
  .out {
    background-color: blueviolet;
    width: 600px;
    height: 300px;
    display: flex;
  }
  .in {
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
    align-self: center;
  }
</style>
<div class="out">
  <div class="in"></div>
</div>

或者

<style>
  .out {
    background-color: blueviolet;
    width: 600px;
    height: 300px;
    display: flex;
    align-items: center;
  }
  .in {
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
  }
</style>
<div class="out">
  <div class="in"></div>
</div>

或者

<style>
  .out {
    background-color: blueviolet;
    width: 600px;
    height: 300px;
    display: flex;
  }
  .in {
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
    margin: auto 0;
  }
</style>
<div class="out">
  <div class="in"></div>
</div>

# display: grid

和 flex 几乎一样，同样需要考虑兼容性问题

<style>
  .out {
    background-color: blueviolet;
    width: 600px;
    height: 300px;
    display: grid;
    align-items: center;
  }
  .in {
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
  }
</style>
<div class="out">
  <div class="in"></div>
</div>

或者

<style>
  .out {
    background-color: blueviolet;
    width: 600px;
    height: 300px;
    display: grid;
  }
  .in {
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
    margin: auto 0;
  }
</style>
<div class="out">
  <div class="in"></div>
</div>

# transform: translateY(-50%)

兼容性最好
繁琐

<style>
  .out {
    background-color: blueviolet;
    width: 600px;
    height: 300px;
    position: relative;
  }
  .in {
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%); /*兼容性*/
    transform: translateY(-50%);
  }
</style>
<div class="out">
  <div class="in"></div>
</div>

# display: table-cell

有 flex 方法了，这种方法感觉没必要：功能实现了，但语境感觉完全不对（for table？）

<style>
  .out {
    background-color: blueviolet;
    width: 600px;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
  }
  .in {
    background-color: yellowgreen;
    width: 100px;
    height: 100px;
  }
</style>
<div class="out">
  <div class="in"></div>
</div>

# ghost element

（实用，但感觉是时代的产物）

兼容性好
比较难理解

来源于这篇文章： https://css-tricks.com/centering-in-the-unknown/

实现方法有点像变魔术。

在这里插入图片描述

/* This parent can be any width and height */
.block {
  text-align: center;

  /* May want to do this if there is risk the container may be narrower than the element inside */
  white-space: nowrap;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}