码迷,mamicode.com
首页 > 其他好文 > 详细

常用居中方法记录

时间:2016-06-14 23:48:26      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

1.相对定位

(1)在父元素中使用text-align:center;

(2)使用margin:auto;

2.绝对定位

(1)通过设置left,top偏移量和负边距实现居中

   width:[width]; height:[height];

    position:absolute;

    left:50% top:50px;

    margin-left:-[width];

    margin-top:-[height];

(2)通过偏移和css位移实现(css3版)

  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);

(3)通过设置四个偏移量和外边距自动实现居中(水平+垂直)

  width:[width]; height:[height];

  position: absolute;

  left: 0; top: 0; right: 0; bottom: 0;
  margin: auto;

常用居中方法记录

标签:

原文地址:http://www.cnblogs.com/pangys/p/5585752.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!