[Web前端技术教学]网页布局-居中方法小结

最新推荐文章于 2023-07-02 21:23:54 发布

gCodeTop 格码拓普老师

最新推荐文章于 2023-07-02 21:23:54 发布

阅读量928

点赞数

分类专栏： Html/CSS等前端技术 2018-9-Web前端设计文章标签： web 技术教学网页设计前端技术

本文链接：https://blog.csdn.net/vinglemar/article/details/53490838

版权

Html/CSS等前端技术同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

2018-9-Web前端设计

20 篇文章 0 订阅

订阅专栏

1.利用margin的左右auto

<!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>无标题文档</title>
<style type="text/css">
<!--
.container{
	width:80%;
	margin:0 auto;
	background-color: #666666;
}
-->
</style>
</head>
<body>
<div class="container">container</div>
</body>
</html>

2.利用相对定位及负margin

<!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>无标题文档</title>
<style type="text/css">
<!--
#container {
	background-color: #666666;
	position: relative;
	width: 760px;
	left: 50%;
	margin-left: -380px;
	min-width:400px;
}
-->
</style>
</head>

<body>
<div id="container">container</div>
</body>
</html>

3.其它方法:

https://blog.csdn.net/newbie_ling/article/details/78583655

https://blog.csdn.net/qq_28493675/article/details/79199125
https://blog.csdn.net/u011296285/article/details/78737380
https://blog.csdn.net/whuizhou/article/details/53784799
https://blog.csdn.net/liufeifeinanfeng/article/details/78615567