Если у вас есть flexbox, вы можете сделать это, не используя display: table;
CSS:
html,
body {
height: 100%;
width: 100%;
}
.container {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
.content {
width: 440px; // I'm pretty sure this is required but haven't checked
}
HTML:
This div will be centered
Tada , вертикальный и горизонтально центрированный контент div. JSFiddle: https://jsfiddle.net/z0g0htm5/ .
В основном взято из https://philipwalton.github.io/solved-by-flexbox/demos / вертикальное центрирование / и https://css-tricks.com/snippets/css/a-guide-to-flexbox/