在屏幕中心定位<div>元素
我想将一个<div> （或一个<table> ）元素放在屏幕的中心，而不考虑屏幕大小。 换句话说，“顶”和“底”留下的空间应该是相等的，“左”和右“左”的空间应该是相等的。 我只想用CSS来完成这个任务。
我已经尝试了以下，但它不工作：
<body> <div style="top:0px; border:1px solid red;"> <table border="1" align="center"> <tr height="100%"> <td height="100%" width="100%" valign="middle" align="center"> We are launching soon! </td> </tr> </table> </div> </body>
注意：
如果<div>元素（或<table> ）与网站一起滚动或者不是， 只是希望它在页面加载时居中。
简单的方法，如果你有一个固定的宽度和高度：
#divElement{ position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; }
请不要使用内联样式！ 这是一个工作示例http://jsfiddle.net/S5bKq/ 。
随着变换被无处不在支持这些天，你可以做到这一点，不知道popup的宽度/高度
.popup { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
简单！ JSF在这里： http : //jsfiddle.net/LgSZV/
更新：查看https://css-tricks.com/centering-css-complete-guide/关于CSS集中的详尽指南。; 添加到这个答案，因为它似乎得到了很多的眼球。
设置宽度和高度，你很好。
div { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 200px; height: 200px; }
如果你想元素的维度是灵活的（而不关心传统的浏览器），请使用XwipeoutX的答案。
现在，使用HTML 5和CSS 3更容易：
<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body > div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } </style> </head> <body> <div> <div>TODO write content</div> </div> </body> </html>
如果你有一个固定的div只是绝对的位置在50％的顶部和50％的左边和负值的顶部和左边的高度和宽度的一半分别。 根据您的需求调整：
div { position: absolute; top: 50%; left: 50%; width: 500px; height: 300px; margin-left: -250px; margin-top: -150px; }
它将适用于任何对象。 即使你不知道尺寸：
.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
如果有人正在寻找解决scheme，
我find了这个，
它是我发现的最好的解决scheme！
div { width: 100px; height: 100px; background-color: red; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; }
http://dabblet.com/gist/2872671
希望你喜欢！
另一种方便灵活的方法来显示中心块：使用line-height和text-align原生文本alignment方式。
解：
.parent { line-height: 100vh; text-align: center; } .child { display: inline-block; vertical-align: middle; line-height: 100%; }
和html示例：
<div class="parent"> <div class="child">My center block</div> </div>
我们使div.parent全屏，他的单个子div.child作为文本alignmentdisplay: inline-block 。
优点：
- 灵活性，没有绝对值
- 支持resize
- 在手机上运行良好
简单的例子JSFiddle： https ：//jsfiddle.net/k9u6ma8g
我会在CSS中这样做：
div.centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
那么在HTML中：
<div class="centered"></div>
尝试这个：
width:360px; height:360px; top: 50%; left: 50%; margin-top: -160px; /* ( ( width / 2 ) * -1 ) */ margin-left: -160px; /* ( ( height / 2 ) * -1 ) */ position:absolute;
尝试这个
<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;"> <tr> <td> <div style="text-align: left; display: inline-block;"> Your Html code Here </div> </td> </tr> </table>
或这个
<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table"> <div style="display: table-row"> <div style="display: table-cell; vertical-align:middle;"> <div style="text-align: left; display: inline-block;"> Your Html code here </div> </div> </div> </div>
