somanyerrorswhy somanyerrorswhy - 5 months ago 14
HTML Question

How do I center a header both vertically and horizontally in CSS?

<html>
<head>
<h1>Hello.</h1>
</head>
<link rel="stylesheet" type="text/css" href="butters.css">
<link href="https://fonts.googleapis.com/css?family=Galada" rel="stylesheet">
<body></body>
</html>


+

h1{
font-family: 'Galada', cursive;
font-size: 400%;
position: relative;
top: 50%;
left: 50%;
transform: translateY(-50%);
}


Link to fiddle.
I pretty much followed this tutorial.

I'm finding issues with it though because it creates a horizontal scroll bar, which I don't want and I don't believe it is centering horizontally. I just want it to be smack dab in the middle of the screen no matter the screen size but i'm not sure what CSS it'll take to do that.

Answer

I changed your CSS:

h1{
   font-family: 'Galada', cursive;
   font-size: 70px;
   transform: translate(-50%,-50%);
   position: absolute;
   top: calc(50% - 35px);
   left: 50%;   
}