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
看了半天,好像一定要指定一个父元素,然后基于这个父元素做垂直居中,待我仔细研究研究。
很多方法,不敢写,因为自己不是怎么理解。等以后慢慢添。