DIV Vertical align top middle bottom - HTML tag & code practical example for blog

Vertical alignment does not work well with DIV tags. To solve this problem, we can set the position with two DIVs. This works well in any browser. If you follow the example below, you can do it easily.

The content in the DIV area is vertically top-aligned by default, so vertical top alignment is not necessary.


Example: vertical align to middle

<div style="width: 100%; border: 1px solid red; height: 100px; position: relative;">
<div style="width: 99%; border: 3px dotted blue; position: absolute; top: 50%; transform: translateY(-50%);">
contents here
.............
.............
</div>
</div>

Actual results:

contents here
.............
.............

Example: vertical align to bottom

<div style="width: 100%; border: 1px solid red; height: 100px; position: relative;">
<div style="width: 99%; border: 3px dotted blue; position: absolute; bottom: 0px;">
contents here
.............
.............
</div>
</div>

Actual results:

contents here
.............
.............

The example on this page is not theoretical but practical. We sometimes experience the difference between theory and practice in running our homepage or blog. Theories are needed to solve problems, but practical solutions are more important. This page is for that.