html css 元素居中的方法

最新推荐文章于 2025-07-24 09:43:04 发布

原创最新推荐文章于 2025-07-24 09:43:04 发布 · 899 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #元素居中 #网页居中 #居中

css 同时被 3 个专栏收录

9 篇文章

订阅专栏

html

5 篇文章

订阅专栏

元素居中

1 篇文章

订阅专栏

本文介绍如何使用HTML和CSS实现网页元素在父级容器中的水平、垂直及上下左右居中布局，包括具体代码示例和效果展示。

html元素水平居中于其父级元素的方法：

方法1：

<div class="wrap">
<div class="left-right-middle1">左右居中方法1</div>
</div>

html,body,div{
	margin:0;
	padding:0;
	height:100%;
	position:relative;
}
.wrap{
	width:400px;
	height:300px;
	margin:10px;
	border:1px solid #000;
}
.left-right-middle1{
	width:200px;
	background-color:#69F;
	margin:0 auto;
}

方法2：

<div class="wrap">
<div class="left-right-middle2">左右居中方法2</div>
</div>

html,body,div{
	margin:0;
	padding:0;
	height:100%;
	position:relative;
}
.wrap{
	width:400px;
	height:300px;
	margin:10px;
	border:1px solid #000;
}
.left-right-middle2{
	width:200px;
	background-color:#69F;
	left:50%;
	margin-left:-100px;
}

html元素垂直居中于其父级元素的方法：

<div class="wrap">
<div class="top-bottom-middle">上下居中</div>
</div>

html,body,div{
	margin:0;
	padding:0;
	height:100%;
	position:relative;
}
.wrap{
	width:400px;
	height:300px;
	margin:10px;
	border:1px solid #000;
}
.top-bottom-middle{
	height:200px;
	background-color:#69F;
	top:50%;
	margin-top:-100px;
}

html元素水平垂直居中于其父级元素的方法：

方法1：

<div class="wrap">
<div class="all-middle1">上下左右居中方法1</div>
</div>

html,body,div{
	margin:0;
	padding:0;
	height:100%;
	position:relative;
}
.wrap{
	width:400px;
	height:300px;
	margin:10px;
	border:1px solid #000;
}
.all-middle1{
	width:200px;
	height:200px;
	background-color:#69F;
	top:50%;
	margin:-100px auto 0;
}

方法2：

<div class="wrap">
<div class="all-middle2">上下左右居中方法2</div>
</div>

html,body,div{
	margin:0;
	padding:0;
	height:100%;
	position:relative;
}
.wrap{
	width:400px;
	height:300px;
	margin:10px;
	border:1px solid #000;
}
.all-middle2{
	width:200px;
	height:200px;
	background-color:#69F;
	top:50%;
	left:50%;
	margin:-100px 0 0 -100px;
}

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<title>Div Middle</title>
<style type="text/css">
html,body,div{
	margin:0;
	padding:0;
	height:100%;
	position:relative;
}
.wrap{
	width:400px;
	height:300px;
	margin:10px;
	border:1px solid #000;
}
.left-right-middle1{
	width:200px;
	background-color:#69F;
	margin:0 auto;
}
.left-right-middle2{
	width:200px;
	background-color:#69F;
	left:50%;
	margin-left:-100px;
}
.top-bottom-middle{
	height:200px;
	background-color:#69F;
	top:50%;
	margin-top:-100px;
}
.all-middle1{
	width:200px;
	height:200px;
	background-color:#69F;
	top:50%;
	margin:-100px auto 0;
}
.all-middle2{
	width:200px;
	height:200px;
	background-color:#69F;
	top:50%;
	left:50%;
	margin:-100px 0 0 -100px;
}
</style>
</head>

<body>
<div class="wrap">
<div class="left-right-middle1">左右居中方法1</div>
</div>
<div class="wrap">
<div class="left-right-middle2">左右居中方法2</div>
</div>
<div class="wrap">
<div class="top-bottom-middle">上下居中</div>
</div>
<div class="wrap">
<div class="all-middle1">上下左右居中方法1</div>
</div>
<div class="wrap">
<div class="all-middle2">上下左右居中方法2</div>
</div>
</body>
</html>

效果图：