Skip to content

Instantly share code, notes, and snippets.

@soleo

soleo/index.html

Created August 21, 2017 01:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save soleo/d2d49d9d89d7c0362f9bb618fa206738 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save soleo/d2d49d9d89d7c0362f9bb618fa206738 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. soleo created this gist Aug 21, 2017.
    8 changes: 8 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <div class="container">
    <div class="element-center">
    <img class="peapod-logo" src="https://www.peapod.com/shop/images/favicon/apple-icon-180x180.png" />
    <h1 class="peapod-text">
    Peapod
    </h1>
    </div>
    </div>
    30 changes: 30 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    display:block;
    }

    .container {
    background-color: #333;
    display: block;
    width: 100%;
    min-height: 100vh;
    }

    .element-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    margin-top: -90px; /* Half the height */
    margin-left: -90px; /* Half the width */
    }

    .peapod-text {
    color: #fff;
    font-family: sans-serif;
    text-align:center;
    }
    7 changes: 7 additions & 0 deletions vertically-center-things-absolute-positioning.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Vertically Center Things - Absolute Positioning
    -----------------------------------------------


    A [Pen](https://codepen.io/soleo/pen/gxeoOg) by [Xinjiang Shao](https://codepen.io/soleo) on [CodePen](https://codepen.io).

    [License](https://codepen.io/soleo/pen/gxeoOg/license).