CSS position: absolute

In the following example the <div> with the blue border is positioned in the center of the page and its contents are also centered.

This paragraph is positioned at the top of the <div> and its contents are left justified.

This paragraph is centered at the bottom of the <div> and its contents are left justified.

<div> with paragraph centered at bottom

<style type="text/css">
p {
   margin-top: 8px;
   margin-bottom: 8px;
   padding: 0 0.3em;
}
.blue-border {
   border: 2px solid #0000cc;
}
.green-border {
   border: 2px solid #009900;
}
.relative {
   width: 70%;
   height: 250px;
   position: relative;
}
.bottom {
   position: absolute;
   bottom: 0;
   left: 20%;
   width: 60%;
}
.center {
   margin-left: auto;
   margin-right: auto;
}
.left-justified {
   text-align: left;
}
.centered {
   text-align: center;
}
</style>
<div class="relative center blue-border centered">
   <p class="left green-border left-justified">This paragraph is positioned at the top of the <div> and its contents are left justified.</p>
   <p class="bottom-60pct green-border left-justified">This paragraph is centered at the bottom of the <div> and its contents are left justified.</p>
</div>

The contents of the <div> are positioned relative to the <div> itself using position: relative. It is centered with margin-left: auto and margin-right: auto and its contents are centered with text-align: center.

To position the paragraph at the bottom of the div, the bottom-60% style includes position: absolute and bottom: 0. Since margin: auto does not work for centering a paragraph when using absolute positioning, left: 20% sets the absolute left position to half the space not used by the paragraph element (20% = one half of 100% minus 60%).