Using the body page and SPAN tags, the correct way.
<body>
<span>Hello</span>
</body>Using tables (works well with old browsers):
html, body
{
margin: 0;
height: 100%;
}
body
{
display: table;
width: 100%;
}
body > span
{
display: table-cell;
vertical-align: middle;
text-align: center;
}Using Flexbox - CSS grid (modern browsers):
body
{
display: grid;
height: 100vh;
margin: 0;
place-items: center center;
}One div with full horizontal and vertical centering. Ideal to put into another div or full page.
<div style="
position: relative;
left: 100%;
top: 50%;
transform: translate(-50%,-50%);
background: orange;
">Hello</div>text-align aligns text and other inline content. It doesn't align block element children.
To do that, you want to give the element you want aligned a width, with ‘auto’ left and right margins. This is the standards-compliant way that works everywhere except IE5.x.
<div style="width: 0%; margin: 0 auto;">Hello</div>
For this to work in IE6, you need to make sure Standards Mode is on by using a suitable DOCTYPE. If you really need to support IE5/Quirks Mode, which these days you shouldn't really, it is possible to combine the two different approaches to centering:
<div style="text-align: center">
<div style="width:0%; margin: 0 auto; text-align: left">Hello</div>
</div>Note: Styles are best put inside a stylesheet, but the inline version is illustrative.