水平垂直居中的实现方式

最新推荐文章于 2025-03-10 08:45:00 发布

原创最新推荐文章于 2025-03-10 08:45:00 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

HTML5 + CSS3 专栏收录该内容

2 篇文章

订阅专栏

这篇博客详细介绍了如何使用CSS实现元素的水平和垂直居中。对于行内元素，可以使用text-align:center实现水平居中；对于块元素，可以设置margin:0 auto来达到居中效果，但需要预先设定宽度。对于绝对定位的元素，可以结合left:50%, margin-left:负宽度的一半或使用transform(-50%, -50%)来实现居中。垂直居中方面，行内元素通过line-height等于高度值可以做到，而绝对定位元素可以采用top:50%, margin-top:负高度的一半，transform(-50%, -50%)或者设置top/bottom/left/right为0并添加margin:auto的方法。

1. 水平居中

行内元素： text-align:center;
块元素： margin: 0 auto; （前提：给定宽度）
absolute 元素：left:50%; margin-left:宽度一半的负值（前提：给定宽度）

absolute元素的居中举例：

.header__wrap {
   position: relative;
   height:80px;
}
.header__logo {
      position: absolute;
      left: 50%;
      margin-left: -200px;
      width:400px;
}