你好
我的 HTML 和 CSS 发生了一些奇怪的事情，我有一个 2 个嵌套的 div，它们应该在其父元素内水平居中显示，但它们位于左侧。
我做错了什么？
<!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"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
html, body { height: 100%; width: 100%; }
body { background-color: RGB(255, 255, 255); margin: 20px; text-align: center; }
#outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; }
#header { width: 30%; height: 180px; background-color: blue; }
#main { width: 1200px; height: 60%; background-color: red; }
-->
</style>
<script type="text/javascript">
<!--
-->
</script>
</head>
<body>
<div id="outerContainer">
<div id="header">
</div>
<br/>
<div id="main">
</div>
</div>
</body>
</html>
最佳答案
您能否在您的 css 中为两个不会居中的 div 标签尝试以下附加属性:
margin :自动；
这样:
#outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; }
#header { width: 30%; height: 180px; background-color: blue; margin: auto;}
#main { width: 1200px; height: 60%; background-color: red; margin: auto;}
关于javascript - Div 不会居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6501644/