Two common CSS problems I usually meet and solution

on Front-end

Most of web applications have a footer. Footer is for your company or organization’s infomation, copyright, etc. And as its name, it need to be at the bottom. But somethime your body content is too short, your footer is still at the bottom of the page, but not the bottom of viewport. Like this

Solution:

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

  html,
  body {
     margin:0;
     padding:0;
     height:100%;
  }
  #container {
     min-height:100%;
     position:relative;
  }
  #body {
     padding-bottom:60px;   /* Height of the footer */
  }
  #footer {
     position:absolute;
     bottom:0;
     width:100%;
     height:60px;   /* Height of the footer */
  }

References: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Following this article, you can center anything totally in CSS. The most common case is centering the unknown height and width element. And for short, this is the solution:

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

Centering things in CSS will be more easier if you use flexbox. flexbox is simple for centering.

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