当前位置： 文江博客文章教程详情

第 204 题：如何实现元素的水平垂直居中？

发布于 2022-10-02 08:07:34 字数 5457 浏览 537 评论 1

在 HTML 中分为块级元素和内联元素，两者实现居中的方法都 一样，并且块级元素中还要区分定宽高和不定宽高的情况

水平居中

行内元素水平居中

父元素设置 text-align: center

<div class="container">
  <p>我是内联元素</p>
</div>
<style>
.container{
  width: 100%;
  height: 100px;
  background-color: darkseagreen;
  /* 父元素是块级元素，直接设置text-align属性 */
  text-align: center;
}
</style>

块级元素水平居中（定宽）

通过设置要居中元素的外边距来实现：margin: 0 auto

<body>
  <div class="father">
  <div class="son"></div>
  </div>
</body>
<style>
  .father {
  background-color: red;
  width: 500px;
  height: 500px;
  }
  .son {
  background-color: sandybrown;
  width: 100px;
  height: 100px;
  /* 块级定宽，margin: 0 auto; */
  margin: 0 auto;
  }
</style>

块级元素水平居中（不定宽）

子元素设置display: inline,父元素设置text-aling: center（在设置了display: inline后会将该元素显示为行内元素，而inline不能设置宽高和上下外边距，但是可以左右外边距）

<body>
  <div class="father">
  <div class="son">1111111</div>
  </div>
</body>
<style>
  .father {
  background-color: red;
  width: 500px;
  height: 500px;
  text-align: center;
  }
  .son {
  display: inlines;
  background-color: blue;
  }
</style>

使用定位属性实现，父元素设置 position: relative;，子元素设置 position: absolute;、left: 50%;、margin-left: -元素宽度一半

<body>
  <div class="father">
  <div class="son"></div>
  </div>
</body>
<style>
.father {
  background-color: red;
  width: 500px;
  height: 500px;
  position: relative;
}
.son {
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: blue;
  left: 50%;
  /* 自己宽度的一半 */
  margin-left: -50px;
}
</style>

使用 flex 布局实现水平居中在父元素设置 display: flex;、justify-content: center;

<body>
  <div class="father">
  <div class="son"></div>
  </div>
</body>
<style>
  .father {
  background-color: red;
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  }
  .son {
  width: 100px;
  height: 100px;
  background-color: blue;
  }
</style>

垂直居中

行内元素垂直居中

设置子元素的行高即可实现，若行内元素文本出现换行则需要给父元素添加 display: table-cell;、vertical-align: middle;

<!-- HTML -->
<div class="container">
  <p>单行行内元素</p>
</div>

<!--CSS-->
<style>
.container{
  width: 500px;
  height: 200px;
  background-color: darkseagreen;
  <!-- 行内元素换行时添加display: table-cell; vertical-align: middle; -->
}

.container p{
  line-height: 200px;
}
</style>

块级元素垂直居中（定高）

定宽时，使用定位实现垂直居中。父元素设置 position: relative;，子元素设置 display:absolute;、left: 50%;、margin-top: -一半高度

<!-- HTML -->
<div class="container">
  <div></div>
</div>

<!-- CSS -->
<style>
.container{
  width: 500px;
  height: 200px;
  background-color: darkseagreen;

  position: relative;

}

.container div{
  width: 50px;
  height: 50px;
  background-color: rosybrown;

  position: absolute;
  top: 50%;
  margin-top: -25px;
}
</style>

块级元素垂直居中（不定高）

需要使用到 transform: translateY(-50%);

<!-- HTML -->
<div class="container">
  <div>不定高度</div>
</div>

<!-- CSS -->
<style>
 .container{
  width: 500px;
  height: 200px;
  background-color: darkseagreen;

  position: relative;

}

.container div{
  width: 50px;
  background-color: rosybrown;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

使用 flex 实现垂直居中

<!-- HTML -->
<div class="container">
  <div>不定高度</div>
</div>

<!-- CSS -->
<style>
.container{
  width: 500px;
  height: 200px;
  background-color: darkseagreen;

  display: flex;
  align-items: center;

}

.container div{
  width: 50px;
  background-color: rosybrown;
}
</style>

水平垂直居中

利用定位实现水平垂直居中，父元素设置 position: relative;，子元素设置 position: absolute;

<!-- HTML -->
<div class="container">
  <div></div>
</div>
<!-- CSS -->
<style>
.container{
  width: 500px;
  height: 200px;
  background-color: darkseagreen;

  position: relative;

}

.container div{
  width: 50px;
  height: 50px;
  background-color: rosybrown;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
</style>

利用 flexbox 实现水平垂直居中，父元素设置 position: relative;，子元素设置 position: absolute;

<!-- HTML -->
<div class="container">
  <div></div>
</div>

<!-- CSS -->
<style>
.container{
  width: 500px;
  height: 200px;
  background-color: darkseagreen;

  display: flex;
  justify-content: center;
  align-items: center;

}

.container div{
  width: 50px;
  height: 50px;
  background-color: rosybrown;

}
</style>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群
更多

你可能也喜欢

创建 Docker Swarm 集群

Maven 中 optional 关键字

利用 httpd.ini 文件实现虚拟主机域名绑定到目录

Croppic 基于 jQuery 免费开源图片裁切插件

用 Python 预测今后的北京高考人数

查看 Linux 内核路由表 以及 route 命令的使用

Linux 中 route 命令使用和介绍

解决 Navicat 出错 1130-host . is not allowed to connect to this MySql server

上一篇：

下一篇：

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

锦上情书 2022-05-03 17:52:22

水平居中

1. 行内元素

若是行内元素，给其父元素设置 text-align:center 即可实现行内元素水平居中

<div class="parent">
  <span class="child">测试</span>
</div>
<style>
  .parent {
    background-color: aqua;
    text-align: center; /* 水平居中 */
  }
  .child {
    color: #fff;
    background-color: blueviolet;
  }
</style>

2. 块级元素

2.1 宽高固定

当宽高固定时，以下 html 示例：

<div class="parent">
  <div class="child"></div>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
  }
  .child {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
  }
</style>

以下四种方式显示效果均为：

方式一：margin:0 auto
<style>
  .child {
    margin:0 auto;
  }
</style>
方式二：absolute + margin-left
<style>
  .child {
    position: absolute;
    margin-left: -50px;
    left: 50%;
  }
</style>
方式三：absolute + calc
<style>
  .child {
    position: absolute;
    left: calc(50% - 50px);
  }
</style>
方式四：absolute + left + right + margin-left
<style>
  .child {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
</style>

2.2 宽高不定

当宽高不定时，以下测试示例：

<div class="parent">
  <div class="child">测试示例</div>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
  }
  .child {
    background-color: blueviolet;
    color: #fff;
  }
</style>

以下三种方式显示效果均为：

方式一：使用 CSS3 中新增的 transform 属性
<style>
  .child {
    position: absolute;
    left: 50%;
    transform:translate(-50%, 0);
  }
</style>
方式二：flex 布局
<style>
  .child {
    display: flex;
    justify-content: center;
  }
</style>

方式三：width: fit-content
<style>
  .child {
    width: fit-content;
    margin: 0 auto;
  }
</style>

fit-content 是 CSS3中 给 width 属性新加的一个属性值，它配合 margin 可以轻松实现水平居中

垂直居中

1. 行内元素

代码示例：

<div class="parent">
  <span class="child">测试示例</span>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
    text-align: center; /* 水平居中 */
  }
  .child {
    color: #fff;
    background-color: blueviolet;
  }
</style>

方式一：line-height（单行文本）

<style>
  .child {
    line-height: 100px;
  }
</style>

当多行时会样式错乱，需要用到 vertical-align: middle 布局

方式二：display: table-cell + vertical-align (多行文本)

可用 vertical-align 属性, 而 vertical-align 只有在父层为 td 或者 th 时, 才会生效，对于其他块级元素, 例如 div 、 p 等，默认情况是不支持的。

为了使用 vertical-align ，我们需要设置父元素 display:table , 子元素 display:table-cell; vertical-align:middle;

<style>
  .parent {
    display: table;
  }
  .child {
    display: table-cell;
    vertical-align: middle;
  }
</style>

方式三：display: inline-block + vertical-align 隐式幽灵节点

设置幽灵节点的高度以及幽灵节点的基线（通过 line-height ），来设置幽灵节点的 x-height , 是 span 的中线与幽灵节点的中线对齐，同样也可以使 vertical-align: middle; 居中

<style>
  .parent {
    line-height: 100px; /* 通过 line-height 设置幽灵节点的基线 */
  }
  .child {
    vertical-align: middle;
    line-height: normal; /* 块级元素时需要加 */
    display: inline-block; /* 重点，要把 line-height 设置成 normal, 要不然会继承100 */
  }
</style>

方式四：display: grid 布局

<style>
  .parent {
    display: grid;
  }
  .child {
    margin: auto;
  }
</style>

效果如上

方式五：writing-mode 布局

writing-mode 属性定义了文本在水平或垂直方向上如何排布。

<style>
  .parent {
    writing-mode: vertical-lr;
  }
  .child {
    writing-mode: horizontal-tb;
  }
</style>

效果如上

2. 块级元素

参照 水平居中的块级元素布局 ，同样把对水平方向的转换为垂直方向的

2.1 宽高固定

示例代码：

<div class="parent">
  <div class="child"></div>
</div>
<style>
  body {
    background-color: aqua;
  }
  .child {
    width: 50px;
    height: 50px;
    background-color: blueviolet;
  }
</style>

以下几种方式显示效果均为：

方式一：absolute + margin-top
<style>
  .child {
    position: absolute;
    margin-left: -25px;
    left: 50%;
    margin-top: -25px;
    top: 50%;
  }
</style>
方式二：absolute + calc
<style>
  .child {
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
  }
</style>
方式三：absolute + left + right + top + bottom
<style>
  .child {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
</style>

2.2 宽高不定

当宽高不定时，以下测试示例：

<div class="parent">
  <div class="child">测试示例</div>
</div>
<style>
  .parent {
    height: 100px;
    background-color: aqua;
  }
  .child {
    background-color: blueviolet;
  }
</style>

以下两种方式显示效果均为：

方式一：使用 CSS3 中新增的 transform 属性

需要设定 parent 为相对定位( position: relative )

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translate(-50%, -50%);
  }
</style>
方式二：flex 布局
<style>
  .parent {
    display: flex;
    height: 100%;
    justify-content: center;  /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }
</style>

原文

回复
~没有更多了~

关于作者

小…楫夜泊

暂无简介

0 文章
0 评论
22 人气
发私信
更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

漫雪独思

文章 0 评论 0

垂暮老矣

文章 0 评论 0

鹊巢

文章 0 评论 0

萌酱

文章 0 评论 0

雨说

文章 0 评论 0

冰葑

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文