//vertical-align using tables
.table{
display: table;
table-layout: fixed;
width: 100%;
margin: 0 auto;
}
.table-cell {
display: table-cell;
vertical-align: middle;
}
//vertical-align using transform
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
//vertical-align using inline-block and height
.box {
height: 30em;
text-align: center;
}
.box::after {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.box__element {
display: inline-block;
width: 10em;
height: 10em;
vertical-align: middle;
}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.