How do I center content in a div using CSS?

Question

How do I center content in a div both horizontally and vertically?

Answer 1

By using transform: works like a charm!

    center content using transform
    

    //CSS
    .parent {
        position: relative;
        height: 200px;
        border: 1px solid;
    }
    .parent span {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }