I tried centering my h1 in the body tag like this:
h1 {margin:0 auto}
But it doesn't center. How do I fix it?
How do I center an h1 in the body
176.4k Views Asked by user3182981 At
6
There are 6 best solutions below
1
On
Alternatively, you could try this:
h1 {
text-align: center;
margin: 0px auto;
display; block;
}
0
On
You can center it by setting the width.
h1 {
width:500px;
margin: 0 auto;
background: gray;
text-align: center;
}<body>
<h1>My Title</h1>
</body>0
On
What j09691 said does work, but not all the time.
This is why I use:
/* Put this inside element/class. */
transform: translateX(400px);
If it doesn't fit in the center of the screen for you, just adjust it. Of course, you could use some css and/or js magic to automatically adjust it.
0
On
text-align: center is best choice but if you still want to center it using margin: 0 auto you have assign some width to H1 (a block) element.
You can center a block-level element by giving it margin-left and margin-right of auto (and it has a set width, otherwise it would be full width and wouldn’t need centering). That’s often done with shorthand like this:
.center-me { margin: 0 auto; }Source: https://css-tricks.com/centering-css-complete-guide/#horizontal-block
In this case:
jsFiddle example
The margin:auto rule is used when you set a width on the element, which you haven't done.