本文介绍了使用CSS实现元素居中的几种方法，包括table方法、position方法等，并提供了具体的代码示例。
table方法：
<body>
<div style="display: table; border: 1px solid red; width: 800px; height: 800px;">
<div style="display: table-cell; vertical-align: middle; margin: 0 auto">
<div style="border: 1px solid orange; width: 500px; height: 500px; margin: 0 auto;">
</div>
</div>
</div>
</body>
<div style="display: table; border: 1px solid red; width: 800px; height: 800px;">
<div style="display: table-cell; vertical-align: middle; margin: 0 auto">
<div style="border: 1px solid orange; width: 500px; height: 500px; margin: 0 auto;">
</div>
</div>
</div>
</body>
position方法：
<div id="div1" style="width: 500px; height: 500px; border: 1px solid #f00; position: relative;">
<div id="div2" style="width: 200px; height: 200px; border: 1px solid #000; position: absolute;
top: 50%; left: 50%; margin: -100px 0 0 -100px;">
</div>
</div>
<div id="div2" style="width: 200px; height: 200px; border: 1px solid #000; position: absolute;
top: 50%; left: 50%; margin: -100px 0 0 -100px;">
</div>
</div>
在body中居中：
<body>
<div style="border:1px red solid; width:100px; height:100px; top: 50%; left: 50%; position: absolute; margin: -50px 0 0 -50px;"></div>
</body>
<div style="border:1px red solid; width:100px; height:100px; top: 50%; left: 50%; position: absolute; margin: -50px 0 0 -50px;"></div>
</body>
扫一扫
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
