how to vertical align middle code example
Example 1: css align center
//HTML
Hello World
//CSS
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Example 2: css vertical center
/*Remove comment to become a better programmer. */
/* No Flexbox */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/* With Flexbox */
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
Example 3: vertical align css
.container{
display: table;
}
.div-inside-container{
display: table-cell;
vertical-align: middle;
}
Example 4: center css elements
body{
display: grid;
place-items: center;
}
Example 5: vertical align div
HTML:
Some txt
bla bla bla
CSS:
div.ext-box { display: table; height: 100%; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }