css实现垂直居中

一、单行内容的居中

  设置height与line-height相等,overflow:hidden即可。

  .demo {

    height: 20px;

    line-height: 20px;

    overflow: hidden;

  }

  注:若不使用overflow:hidden,在浏览器页面缩放时会出现问题。

 

二、div垂直居中

  注意:子盒子用绝对定位的话,父盒子要加上相对定位 position:relative;

     .box {

   position: absolute;

   top: 50%;

   left: 50%;

   z-index: 9999;

   width: 200px;

   height: 200px;

   margin-top: -100px;

   margin-left: -100px;  

  }

posted @ 2017-02-28 17:31  quxiajun  阅读(128)  评论(0编辑  收藏  举报