/* Not strictly necessary in this example, but very common. */
* {
    box-sizing: border-box;
}

.container {
    position: static;   /* Not strictly required because static is the default */
    margin: auto;       /* Will centre the div within the browser window */
    width: 800px;       /* On a small window or screen you won't see all the 800px */
    height: 100%;       /* 100% of browser window */
    background-color: lightgray;
    text-align: center; /* Will centre align text within the div horizontally */
                        /* More difficult to centre vertically */
}

/* One way to centre vertically is the following */
.container p {              /* Note the special selector for a style within a style */
    position: absolute;
    top: 50%;               /* Means 50% of parent */
    left: 50%;
    margin: 0px;            /* Try changing this and then viewing computed size in developer tools */
    transform: translate(-50%, -50%);   /* Means 50% of this element <p> */
    font-size: 48pt;
}


