search by tags

for the user

adventures into the land of the command line

a guide to centering divs

centering a div in a page

    <div class="center-div"></div>

    .center-div {
        margin: 0 auto;
        width: 100px;
    }

centering a div in a page, horizontally & vertically

    .center-div {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 100px;
    }

centering a div in a responsive page

    .center-div {
        margin: 0 auto;
        max-width: 700px;
    }

centering a dynamic div, horizontally & vertically

    <div class="outer-div"><div class="mid-div"><div class="center-div"></div></div></div>

    .outer-div {
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .mid-div {
        display: table-cell;
        vertical-align: middle;
    }
    .center-div {
        margin: 0 auto;
        width: 300px;
        height: 100px;
    }

centering a div with flexbox

    <div class="container"><div class="item"></div><div>

    .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .item {
        background-color: #f3f2ef;
        border-radius: 3px;
        width: 200px;
        height: 100px;
    }

centering a div within a div

    <div class="outer-div"><div class="inner-div"></div></div>

    .outer-div {
        padding: 30px;
    }
    .inner-div {
        margin: 0 auto;
        width: 100px;
    }

centering a div within a div, horizontally & vertically

    <div class="outer-div"><div class="inner-div"></div></div>

    .outer-div {
        padding: 30px;
    }
    .inner-div {
        margin: auto;
        width: 100px;
        height: 100px;  
    }

centering a div within a div with inline-block

    <div class="outer-div"><div class="inner-div"></div></div>

    .outer-div {
        padding: 30px;
        text-align: center;
    }
    .inner-div {
        display: inline-block;
        padding: 50px;
    }

centering a div within a responsive div

    <div class="outer-div"><div class="inner-div"></div></div>

    .outer-div {
        padding: 30px;
    }
    .inner-div {
        margin: 0 auto;
        max-width: 700px;
    }

vertically center within a div with transform

    <div class="center-div"><p>Hellooooooo</p></div>

    .center-div p {
        position: relative;
        top: 50%;
        transform: perspective(1px) translateY(-50%);
    }

centering a div at the bottom of a page

    <div class="outer-div"><div class="inner-div"></div></div>

    .outer-div {
        position: absolute;
        bottom: 30px;
        width: 100%;
    }
    .inner-div {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        background-color: #ccc;
    }

centering two responsive divs, side by side

    <div class="container"><div class="left-div"></div><div class="right-div"></div></div>

    .container {
        text-align: center;
    }
    .left-div {
        display: inline-block;
        max-width: 300px;
        vertical-align: top;
    }
    .right-div {
        display: inline-block;
        max-width: 150px;
    }
    @media screen and (max-width: 600px) {
        .left-div, .right-div {
            max-width: 100%;
        }
    }