Skip to content

Instantly share code, notes, and snippets.

@gokulkrishh

gokulkrishh/alignments.css

Last active February 7, 2022 15:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gokulkrishh/9ff9c05300634088d8268d255f2783e1 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gokulkrishh/9ff9c05300634088d8268d255f2783e1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gokulkrishh revised this gist Jan 3, 2019. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions alignments.css
    View file
    Original file line number Diff line number Diff line change
    @@ -53,14 +53,14 @@
    /* Way 4 - Using position: absolute; transform */

    .container {
    position: relative;
    position: relative;
    }

    .child {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    }

    /* Way 5 - Using display: table & table-cell */
    @@ -71,7 +71,7 @@

    .child {
    background: red;
    display: table-cell;
    vertical-align: middle;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }
  2. gokulkrishh created this gist Jan 3, 2019.
    77 changes: 77 additions & 0 deletions alignments.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@
    /* HTML */

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

    /* Basic Style */

    .container {
    width: 500px;
    height: 500px;
    background: #ccc;
    }

    .child {
    background: red;
    width: 100px;
    height: 100px;
    }

    /* Different ways to make an element horizontal & vertical center */

    /* Way 1 - Using position: absolute; */

    .container {
    position: relative;
    }

    .child {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    }

    /* Way 2 - Using Flexbox */

    .container {
    display: flex;
    align-items: center;
    justify-content: center;
    }

    /* Way 3 - Using CSS Grid */

    .container {
    display: grid;
    place-items: center;
    }

    /* Way 4 - Using position: absolute; transform */

    .container {
    position: relative;
    }

    .child {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    }

    /* Way 5 - Using display: table & table-cell */

    .container {
    display: table;
    }

    .child {
    background: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    }