somanyerrorswhy somanyerrorswhy - 11 months ago 41
HTML Question

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

<link rel="stylesheet" type="text/css" href="butters.css">
<link href="" rel="stylesheet">


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.


I changed your CSS:

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