Sin responder por la compatibilidad del navegador, sino también mencionar la nueva cuadrícula y la no tan nueva función Flexbox.
Cuadrícula
De: Mozilla - Documentación de cuadrícula - Alinear Div verticalmente
Soporte de navegador: Soporte de navegador de cuadrícula
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
}
HTML:
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
Flexbox
Soporte de navegador: Soporte del navegador Flexbox
CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
tables
diseños aquí?