垂直和水平居中在網頁上的兩行文字

我試圖讓我的頁面上的所有內容都水平和垂直居中，而且我看過了多種不同的方式，似乎工作，我不確定爲什麼。垂直和水平居中在網頁上的兩行文字

我將有三個不同的行文字，都在不同的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; 
 
\t 
 
}

<!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>

我不確定爲什麼會發生這種情況。

來源

2015-05-26 Callum Watson

嘗試h1{display:block}代替table-cell

@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: block; 
 
    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; 
 
\t 
 
}

<!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>

來源

2015-05-26 17:15:48

這回在頂部再次，我需要它水平居中 –

行動，是我的錯。我沒有在整頁上運行代碼，對不起。我會再試一次。 –

使用 '新' 單元的display: table-cell;的組合和vw（視口寬度）和vh（視口的高度）：

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>

來源

2015-05-26 17:28:00 connexo

您可以使用css transform，它可以很容易地完成如下。

http://jsfiddle.net/xumqaobz/

body { 
 
    background: #000; 
 
    color: #fff; 
 
} 
 
#content { 
 
    text-align: center; 
 
    transform: translate(-50%, -50%); 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
}

<div id="content"> 
 
    <h1>CALLUM WATSON</h1> 
 
    <h2>all css?! WHUT.</h2> 
 
</div>

來源

2015-05-26 17:33:47 Stickers

垂直和水平居中在網頁上的兩行文字

回答

相關問題