css 垂直居中

css 居中 网上很多很多。
这里三个方法,只是我觉得容易理解的。

方法一:负边距

<div class="middle"></div>
.middle{    
  /*必须要有宽高*/    
  width: 100px;    
  height: 100px;    
  background-color: red;    
  /*绝对定位*/    
  position: absolute;    
  /*增对左顶点居中,整体不居中*/    
  left:50%;    
  top:50%;    
  /*用margin使得整体得到居中*/    
  margin-left: -50px;    
  margin-top: -50px;}

总结:对有固定宽高的元素较为使用,以左上角点进行居中,然后进行margin处理,使得整体居中。

方法二:margin:auto;

<div class="middle"></div>
.middle{    
/*必须要有宽高*/    
width: 100px;    
height: 100px;    
background-color: red;    
 /*关键点*/  
margin:auto;    
/*绝对定位*/   
position: absolute;    
top:0;    
left:0;    
bottom:0;    
right:0;

参考资料:http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
然并卵,作者最后也没解释原理=-=。这里我也不是很理解,只知道这种布局方式的关键点是<code>margin:auto</code>。

方法三:table
看了半天,好像一定要指定一个父元素,然后基于这个父元素做垂直居中,待我仔细研究研究。

很多方法,不敢写,因为自己不是怎么理解。等以后慢慢添。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 44年前我们就把人类送上月球了,但现在我们仍然无法在CSS中实现垂直居中。 在CSS中对元素进行水平居中是非常简单...
    康斌阅读 15,903评论 9 28
  • 标签:css-常用技巧 table-cell 式将 center 元素的父容器设置为 display:table,...
    练晓习阅读 530评论 0 1
  • CSS实现垂直居中在网页布局中是经常会用到的,所以一定要牢记这些方法以应对之,写下这篇文章也是为了巩固自己的知识点...
    大春春阅读 1,226评论 0 2
  • 前言 CSS居中一直是一个比较敏感的话题,为了以后开发的方便,楼主觉得确实需要总结一下了,总的来说,居中问题分为垂...
    秦至阅读 744评论 1 2
  • 最近不知道怎么回事,心理总是很焦灼,是一种懒洋洋的状态,不想动,不想说话,不想做事,甚至心理有些抑郁。我也不知道是...
    嗳宁阅读 234评论 0 0