HTML元素居中显示的方法

最新推荐文章于 2025-06-10 20:42:44 发布

Alexnul

最新推荐文章于 2025-06-10 20:42:44 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS HTML 文章标签： html 居中

本文链接：https://blog.youkuaiyun.com/Alexnul/article/details/52516192

HTML 同时被 2 个专栏收录

2 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

本文介绍了两种使用CSS实现水平居中的方法：一是通过设置固定宽度和自动边距；二是利用相对定位结合浮动与百分比位移。这两种方法各有优缺点，前者简单易懂但扩展性较差，后者虽然操作较为复杂，但兼容性和扩展性更强。

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

1、固定宽度width属性，将margin-left和margin-right设置为auto

div{
   width:300px;
   margin-left:auto;
   marign-right:auto;
}

优点：简单易懂，兼容性强

缺点：扩展性差，对未知宽度属性的组件无法设置

2、将position属性设置为relative，父子块元素float都为同一方向，之后让父子块元素向相反方向各位移50%，即可达到居中目的

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" ></meta>
	<title></title>
</head>
<style type="text/css">
	.menu{
		width: 95px;
		height: 30px;
		background: #FF0000;
		color: #FFF;
		float: left;
		text-align: center;
		margin-right: 10px;
		padding-top: 12px;
		border-spacing: 10px;
		right: 50%;
		position: relative;
	}
	#form{
		width: auto;
		height: 100px;
		border-color: #FF0000;
		border-width: thin;
		border-style: solid;
		left: 50%;
		position: relative;
		float: left;
	}
</style>
<body>
	<div id="form">
		<div class="menu">首页</div>
		<div class="menu">详情</div>
		<div class="menu">管理</div>
		<div class="menu">投诉</div>
		<div class="menu">反馈</div>
		<div class="menu">留言</div>
		<div class="menu">举报</div>
		<div class="menu">拉黑</div>
		<div class="menu">点赞</div>
	</div>
</body>
</html>

优点：兼容性强，扩展性强

缺点：操作略复杂