您好,欢迎来到点滴吧! 手机版
点滴吧www.diandiba.com
记录点点滴滴,尽在点滴吧
  • 文章
  • 文章
  • 特效
  • 素材
  • 景点
您现在的位置:首页 > CSS教程 > 文章正文
CSS使用技巧——容器的垂直居中
更新时间:2015/1/5 23:23:25   点击:3520次

比如,有一大一小两个容器,请问如何将小容器垂直居中?

  <div id="big">

    <div id="small">

    </div>

  </div>

首先,将大容器的定位为relative。

  #big{

    position:relative;

    height:480px;

  }

然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。

  #small {

    position: absolute;

    top: 50%;

    height: 240px;

    margin-top: -120px;

  }

使用同样的思路,也可以做出水平居中的效果。

相关文章
导航分类
热门文章
关于我们| 联系我们| 免责声明| 网站地图|
CopyRight 2012-2015 www.diandiba.com - 点滴吧 All Rights Reserved
滇ICP备09005765号-2