CSS实现元素水平垂直居中几种方案

最新推荐文章于 2025-04-18 20:43:03 发布

Yongqiang Chen

最新推荐文章于 2025-04-18 20:43:03 发布

阅读量927

点赞数 11

CC 4.0 BY-SA版权

文章标签： css 前端 html vue.js css3

本文链接：https://blog.youkuaiyun.com/Calvin_qiang/article/details/135596187

本文介绍了前端元素水平垂直居中的六种方案，包括利用 display: inline-block 和 vertical-align: middle、定位法、弹性布局、display: table-cell 和 vertical-align: middle 以及 translate 位移等方法，并给出了相应的 HTML 和 CSS 代码示例。

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

方案一：利用 display: inline-block; vertical-align: middle;

<div class="box">

<div></div>

    <span></span>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  text-align: center;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

  display: inline-block;

  vertical-align: middle;

}

.box span {

  width: 0;

  height: 100%;

  display: inline-block;

  vertical-align: middle;

}

方案二：定位法（1）

<div class="box">

      <div></div>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  position: relative;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

}

方案三：定位法（2）

<div class="box">

      <div></div>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  position: relative;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

  position: absolute;

  left: 50%;

  top: 50%;

  margin-left: -100px;

  margin-top: -100px;

}

方案四：弹性布局

<div class="box">

      <div></div>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  display: flex;

  justify-content: center;

  align-items: center;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

}

方案五：利用 display: table-cell; vertical-align: middle;

<div class="box">

      <div></div>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  display: table-cell;

  vertical-align: middle;

  text-align: center;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

  display: inline-block;

}

方案六：利用translate位移

<div class="box">

      <div></div>

</div>

.box {

  width: 500px;

  height: 500px;

  background-color: red;

  position: relative;

}

.box div {

  width: 200px;

  height: 200px;

  background-color: orange;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%,-50%);

}