如何把一个div在浏览器中心使用CSS？
如何使用CSS只在垂直和水平的浏览器的中心放置一个div？
确保它也可以在IE7上运行。
如果一切都失败了，我们可能会使用JavaScript，但是最后的select。
HTML：
<div id="something">... content ...</div> CSS：
#something { position: absolute; height: 200px; width: 400px; margin: -100px 0 0 -200px; top: 50%; left: 50%; }
最简单的解决scheme就是使用自动边距，并给你的div固定的宽度和高度。 这将在IE7，FF，Opera，Safari和Chrome中工作：
HTML：
<body> <div class="centered">...</div> </body>
CSS：
body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .centered { margin: auto; width: 400px; height: 200px; }
编辑！！ 对不起，我只是注意到你说垂直…顶部和底部的默认“自动”边距是零…所以这只会居中水平。 垂直和水平放置的唯一解决方法是像接受的答案一样使用负边距。
margin: auto;
尝试这个
#center_div { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
您也可以使用以下设置您的div：
#something {width: 400px; margin: auto;}
使用该设置，div将会有一个集合，并且边距和任一侧会根据浏览器的自动设置。
<html> <head> <style> * { margin:0; padding:0; } html, body { height:100%; } #distance { width:1px; height:50%; margin-bottom:-300px; float:left; } #something { position:relative; margin:0 auto; text-align:left; clear:left; width:800px; min-height:600px; height:auto; border: solid 1px #993333; z-index: 0; } /* for Internet Explorer */ * html #something{ height: 600px; } </style> </head> <body> <div id="distance"></div> <div id="something"> </div> </body> </html>
testing在FF2-3，IE6-7，歌剧和运作良好！
对于较老的浏览器，您需要在HTML文档的顶部添加此行
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
使用这个：
center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }
.center { margin: auto; margin-top: 15vh; }
应该做的伎俩
