发布于

CSS 实现水平垂直居中的数种方法整合

作者
  • avatar
    姓名
    Jacob
    Twitter

准备工作

我们先写一个简单的 HTML 文件，方便我们接下来进行效果实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./index.css" />
    <title>水平垂直居中</title>
  </head>
  <body>
    <div class="container">
      <div class="inner">水平垂直居中</div>
    </div>
  </body>
</html>

/* CSS文件 */
.container{
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

.inner{
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

最终浏览器呈现的效果如下

image

水平居中

水平居中的方式有多种，总体来说可以使用flex、grid、text-align、margin等方法，我们要实现如下所示的效果

image

使用 flex 方法

.container {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  /* 新增 */
  display: flex;
  justify-content: center;
}

只需在父 DOM 元素中新增以上 CSS 即可实现水平居中

使用 margin 方法

.inner{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  /* 新增 */
  margin: 0 auto;
}

**注：**这个方法适用于知道子 dom 元素宽度已知的情况下

使用 text-align 方法

要注意：text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，并不控制块元素自己的对齐，只控制他行内内容的对齐。

所以这个属性对于我的 HTML 文件是无效的，我们要把内部的 div 改为span即可生效，修改后的代码如下：

<body>
  <div class="container">
    <!-- 将div修改为span -->
    <span class="inner">水平垂直居中</span>
  </div>
</body>

CSS 样式表修改为如下所示

.container{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  /* 新增 */
  text-align: center;
}

使用 grid 方法

.container{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  /* 新增 */
  display: grid;
  grid-template-rows: 1fr; /* 让inner的高度占满 */
  grid-template-columns: 1fr; /* 让inner的宽度占满 */
  justify-items: center; /* 让inner水平居中 */
}

关于grid的更多介绍详见张鑫旭的:point_right:博客:point_left:

使用 left 方法

.container{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  /* 新增 */
  position: relative;
}

.inner{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  /* 新增 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

这个地方要注意的是，如果想要使用left、right、top、bottom方法的时候必须保证父 dom 的position为relative属性，子dom的position为absolute属性，这样才可以生效。并且子dom的基准是离其最近的position属性为relative的父dom元素

当然，这里你如果很明确子 dom 元素和父 dom 元素的宽度的话，比如我写的 HTML 代码，可以直接使用left: 150px来实现，但是这样的话就没有什么拓展性了。

垂直居中

垂直居中的方法也有很多，比如flex、top、grid等，我们要实现的效果如下

image

使用 flex 方法

.container{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  /* 新增 */
  display: flex;
  align-items: center;
}

只需在父 DOM 元素中新增以上 CSS 即可实现垂直居中、

使用 grid 方法

.container{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  /* 新增 */
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  align-items: center;
}

使用 top 方法

.container{
  width: 400px;
  height: 400px;
  border: 1px solid black;
  /* 新增 */
  position: relative;
}

.inner{
  width: 100px;
  height: 100px;
  border: 1px solid red;
  /* 新增 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

使用 line-height 方法

使用line-height方法是不能使我这个 HTML 垂直居中的，但是如果你想垂直居中的元素是一个单行文本，那么可以参照这个方法。

<body>
  <div class="container">
    <!-- 将div修改为span -->
    <span class="inner">水平垂直居中</span>
  </div>
</body>

.container{
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

.inner{
  width: 100px;
  line-height: 400px;
  border: 1px solid red;
}

请注意一定是单行文本，因为line-height是指一行文本的高度，如果是两行文本的话就不能实现垂直居中的效果了

使用 inline-block 方法

.container {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}
/* 新增 */
.container::after {
  display: inline-block;
  vertical-align: middle;
  content: '';
  height: 100%;
}
.inner {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  /* 新增 */
  display: inline-block;
  vertical-align: middle;
}

以上就是我对于垂直居中方法的一些整合，如果您有什么其他的方法，请在评论区进行讨论！

在 GitHub 中查看