JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<div class="anchoredToBottom">
    <div class="centeredIndependentOfWidth">
        I'm content that's always anchored to the bottom of the page and centered independent of my width
    </div>
</div>

CSS

body {
    min-height: 100%;
    min-height: 100vh;
    margin: 0;
    background: url(//f0.bcbits.com/z/13/27/1327404708-1.jpg) center center no-repeat;
    background-size: cover;
    font-family: 'helvetica neue', sans-serif;
    font-size: .8125em;
    line-height: 1.4em;
    -webkit-font-smoothing: antialiased;
    color: #092453;
}
    .anchoredToBottom {
        position: absolute; /* relative to parent */
        right: 0; /* makes width unecessary */
        bottom: 0; /* can be set to any value for margin, or use padding */
        left: 0; /* makes width unecessary */
        z-index: 1; /* avoids quirksmode, */
        background: rgba(15, 126, 255, 0.50);
    }
    .centeredIndependentOfWidth {
        max-width: 320px; /* just for demo */
        /* display: block; only necessary if the element isn't block level */
        margin: 1.5em auto; /* shorthand for 1.5em auto 1.5em auto, can have any top or bottom value */
        background: rgba(34, 244, 254, 0.50);
    }