在布局頁面的時候，有時候會遇到讓一個盒子水平和垂直方向上都居中,如果手動調整盒子的位置，未免太復雜了一些，下面介紹兩種方法，很輕松就能做到盒子的水平和垂直方向的居中：

定位的盒子居中

第一種方法：需要知道盒子的寬高

div{position: absolute;left: 50%;top: 50%;margin: -100px 0 0 -100px;width: 200px;height: 200px; }

第二種方法：不需要知道div的寬高，但是不兼容IE低版本瀏覽器

div{position: absolute;left: 0;right: 0;top: 0;bottom: 0margin: auto;}

浮動的盒子居中

一、使用margin值將浮動的盒子擠到中間位置 div{width:300px;height: 300px;margin: 300px;} 二、讓父元素居中 父元素： .father{width: 200px;height: 200px;margin: 0 auto;float:left; } .son{width:100px;height:100px;float:left; }

轉載于:https://www.cnblogs.com/rainbow8590/p/7096082.html

總結

以上是生活随笔為你收集整理的盒子在页面内居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。