CODEWITHSUNDEEP
htmlcss
Callum Watson
Callum Watson

Reputation: 23

Center two lines of text on web page vertically and horizontally

I'm trying to get all of the content on my page to be centered horizontally and vertically, and I have looked at multiple different ways of doing it, however they don't seem to be working, and I am unsure why.

I will be having three different lines of text, all in different H tags, and they all need to be in the center of the page

e.g: 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>

I am unsure why this is happening.

Upvotes: 1

Views: 92

Answers (2)

connexo
connexo

Reputation: 56754

Use a combination of display: table-cell; and the 'new' units vw (viewport width) and vh (viewport height) :

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>

Upvotes: 1

Nacho Ramos S&#225;nchez
Nacho Ramos S&#225;nchez

Reputation: 584

Try h1{display:block} instead of 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;
	
}
<!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>

Upvotes: 0

Related Questions