somanyerrorswhy somanyerrorswhy - 1 year ago 47
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 Source

I changed your CSS:

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