我试图使用this jsfiddle来使水平和垂直居中的div
保持浏览器宽度和高度的100%,其中文本应该垂直和水平居中对齐,但目前文本的第一行与中心对齐,而不是将整个中心点放在三行文本的中心。css - 中心对齐方式不起作用
任何人都知道如何做到这一点?
我的HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Regret</title>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah|Bowlby+One+SC' rel='stylesheet' type='text/css'>
<link href='css/regret.css' rel="stylesheet">
</head>
<body>
<div id="container">
<div class="inner">
<h1>Regret</h1>
<p class="choice">Let it out</p>
<p class="choice">Wallow in it</p>
</div>
</div>
</body>
</html>
我的CSS:
body { font-family: 'Gloria Hallelujah', cursive; margin:0; text-align:center; color: #5e7c88; }
h1, h2, h3 { font-family: 'Bowlby One SC', cursive; color: #4b5f6d; }
img { border: 0; }
#container { margin: 0 auto; }
.choice { font-family: 'Bowlby One SC', cursive; }
.inner { position: absolute; top: 50%; }
是的,但我不想指定表格的高度(除非该高度为浏览器的100%) – mheavers 2011-12-19 19:56:32
@mheavers。我只是改变了它(见小提琴的答案)。现在检查出来。它是浏览器的100%。 – ksindi 2011-12-19 19:57:22
不错的一个!疯狂多少工作你必须去中心对齐 – mheavers 2011-12-19 20:19:35