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

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

发布于 2022-10-02 08:07:34 字数 5457 浏览 545 评论 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技术交流群
更多

你可能也喜欢

修复 passwd:Authentication token manipulation error 的步骤

如何退出无响应的 ssh 会话

Maven 中 optional 关键字

CSS3 实现条纹斜线方格背景纹理

JavaScript 声明全局变量和局部变量

吐血推荐分享网页手机游戏UI设计小技巧

JavaScript 忍者禁术 Secrets of the JavaScript Ninja 中文版 v1.0

GitHub 开源项目 getAwesomeness

上一篇：

下一篇：

发布评论

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

评论（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 评论
23 人气
发私信
更多

热门标签

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

推荐作者

亚希

文章 0 评论 0

cyp

文章 0 评论 0

北漠

文章 0 评论 0

11223456

文章 0 评论 0

坠似风落

文章 0 评论 0

游魂

文章 0 评论 0

更多

友情链接

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