Common CSS Helper

CssHelper

/*绝对定位元素水平居中*/
/*已知宽高*/
.element {
    width:600px;
    height:500px;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-250px;
    margin-left:-300px;
}

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto; 
}

/*未知宽高*/
.block {
  text-align: center;
  white-space: nowrap;
}

.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

/*清除inline-block元素之间的间隔*/
/*remove the space*/
<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>
/*set font size to zero*/
nav {
  font-size: 0;
}

nav a {
  font-size: 16px;
}
/* use flexbox instead */
ul.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}