如何让Div中的Div居中

最新推荐文章于 2025-06-06 22:51:36 发布

lxy1106

最新推荐文章于 2025-06-06 22:51:36 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html 文章标签： div xhtml html 文档

本文链接：https://blog.youkuaiyun.com/lxy1106/article/details/4826315

Html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个简单的HTML与CSS布局案例，通过设置特定的宽度与外边距自动调整来实现元素的水平居中效果。此方法适用于创建响应式网页头部，如logo区域等，能够根据内部元素大小自动调整布局。

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

代码如下：(注意的是margin:auro,width缺一不可,width大小可以随便它会根据里面大小的改变而改变)

<!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>
</head>
<style type="text/css">
#Header{width:500px; height:100px; margin:auto; background-color:#990000;}
#logo{}
</style>
<body>
<div style="margin:auto;width:500px; background-color:#ff0000;">
<DIV id="logo" style="width:300px; height:50px; background-color:#00ff00; padding-top:25px;margin:auto">

<div style="margin:auto;width:50px; background-color:#990000;"></div>
</DIV>
</div>
</body>
</html>