在不确定自身宽度的情况下，用 CSS 实现元素水平居中的2种方法

最新推荐文章于 2021-06-30 13:01:14 发布

hst❀

最新推荐文章于 2021-06-30 13:01:14 发布

阅读量643

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/HuangsTing/article/details/102601361

CSS 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了使用CSS实现元素垂直居中的三种实用方法，包括利用相对定位、文本对齐和内联块状显示，帮助前端开发者解决布局难题。

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

镜像文章：在不确定自身高度的情况下，用 CSS 实现元素垂直居中的3种方法

方法一

在这里插入图片描述

<div class="wrap">
  <div class="inner">html ： 让 inner 水平居中</div>
</div>

<style>
.wrap {  
    float: left;/* 为了让 wrap 的宽度等于 inner 的宽度 */  
    position: relative; 
    left: 50%;
    background: blanchedalmond;
}
.inner {  
    position: relative;  
    left: -50%; 
    background: rgba(1,1,1,0.2);
}
</style>

方法二

在这里插入图片描述

<div class="box">
　　<div class="box2">
　　　　<a href="#">测试文件</a>
　　　　<a href="#">测试文件</a>
　　　　<a href="#">测试文件</a>
　　</div>
</div>

<style>
.box{ 
	text-align:center;
}
.box2{
	display:inline-block;
	*display:inline;
	*zoom:1;
}
</style>