Page 101 - CSS

margin: 0 auto;
width: 200px;
}

jsfiddle from original question. This approach

• works with dynamic height elements
• respects content flow
• is supported by legacy browsers

Using line-height

You can also use line-height to center vertically a single line of text inside a container :

CSS

div {
height: 200px;
line-height: 200px;
}

That's quite ugly, but can be useful inside an <input /> element. The line-height property works
only when the text to be centered spans a single line. If the text wraps into multiple lines, the
resulting output won't be centered.

Centering vertically and horizontally without worrying about height or width

The following technique allows you to add your content to an HTML element and center it both
horizontally and vertically without worrying about its height or width.

The outer container

• should have display: table;

The inner container

• should have display: table-cell;
• should have vertical-align: middle;
• should have text-align: center;

The content box

• should have display: inline-block;
• should re-adjust the horizontal text-alignment to eg. text-align: left; or text-align: right;,
unless you want text to be centered

https://riptutorial.com/ 79