我试图让我页面上的所有内容水平和垂直居中，我已经研究了多种不同的方法，但它们似乎不起作用，我不确定为什么.
我将有三行不同的文本，都在不同的 H 标签中，并且它们都需要位于页面的中心
例如:http://gyazo.com/ffb698f181f428217fc9dc282969c190
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
body {
margin: 0;
padding: 0;
}
img {
margin: 0;
padding: 0;
}
h1 {
color: #fff;
font-family: 'Lato', sans-serif;
display: table-cell;
vertical-align: middle;
text-align:center;
}
h2 {
color: #fff;
font-family: 'Lato', sans-serif;
}
#content {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
text-align: center;
background:#000;
background-size: cover;
background-position: 50% 50%;
display: table;
}<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Callum Watson</title>
</head>
<body>
<div id="content">
<h1> CALLUM WATSON </h1>
<h2>all css?! WHUT.</h2>
</div>
</body>
</html>我不确定为什么会这样。
最佳答案
结合使用 display: table-cell; 和"new"单位 vw(视口(viewport)宽度)和 vh(视口(viewport)高度):
body {
margin: 0;
padding: 0;
}
#content {
color: #FFF;
width: 100vw;
height: 100vh;
text-align: center;
background:#000;
display: table-cell;
vertical-align: middle;
font-family: 'Lato', sans-serif;
}<div id="content">
<h1> CALLUM WATSON </h1>
<h2>all css?! WHUT.</h2>
</div>关于html - 将两行文本在网页上垂直和水平居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30464846/