Page 100 - CSS

Note:- Whenever you use this function, always take care of the space between two values
calc(100% - 80px).

CSS

.center {
position: absolute;
height: 50px;
width: 50px;
background: red;
top: calc(50% - 50px / 2); /* height divided by 2*/
left: calc(50% - 50px / 2); /* width divided by 2*/
}

HTML

<div class="center"></div>

Vertically align dynamic height elements

Applying css intuitively doesn't produce the desired results because

• vertical-align:middle isn't applicable to block-level elements
• margin-top:auto and margin-bottom:auto used values would compute as zero
• margin-top:-50% percentage-based margin values are calculated relative to the width of
containing block

For widest browser support, a workaround with helper elements:

HTML

<div class="vcenter--container">
<div class="vcenter--helper">
<div class="vcenter--content">
<!--stuff-->
</div>
</div>
</div>

CSS

.vcenter--container {
display: table;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
}
.vcenter--helper {
display: table-cell;
vertical-align: middle;
}
.vcenter--content {

https://riptutorial.com/ 78