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
看了半天令野,好像一定要指定一個父元素徽级,然后基于這個父元素做垂直居中,待我仔細研究研究现使。
很多方法旷痕,不敢寫,因為自己不是怎么理解售碳。等以后慢慢添绞呈。