html css常見頁面布局（一）

1.div元素居中

1.1居中的div元素寬高已定

效果圖：

**如下：

//css樣式 .div1 .div2

tips:遇到寬高固定的元素居中問題都可以按照這樣的樣式來設計，父元素應用position:relative/absolute（主要是為了照顧子div中的position:absolute ps:absolute只能相對於除了static已經定位的最近父元素進行定位）；

子元素即本例中的div2定位採用absolute定位，設定四個關鍵屬性：top：50%；left：50%；margin-left:-0.5width;margin-top:-0.5height.

關於這幾個引數只要記住就好了，其中蘊含著可能小學四五年級的高深數學知識，有興趣的可以去算算看。

另外只要將margin改為auto也可以實現上述效果。

.div2

tips:top;0; left:0; right;0; bottom:0;會使得子元素充滿容器（如果不指定子元素固定寬高）。固定寬高（父元素）=固定寬高（子元素）+margin（包括左右上下）而margin:auto會使得左右邊距一致，從而實現了水平垂直居中。

1.2無論是否設定了子元素寬高，都能滿足（flex布局，相關資訊參考文章：

效果如下：

ps上面的**中，我將body設定了高度（body的預設屬性是width為最大，而height為auto，雖內容的填充而增大，如不設定，則無法實現子元素的垂直居中），然後應用方法1.1的方法將div1居中，再應用flex布局將div2實現居中。

（flex屬性也很值得細細的琢磨哦 ?）

1.3使用transform使子元素居中(可不指定寬高)

指定寬高效果：

不指定寬高向其中填充元素

hello world!hello world!

效果圖：

其他居中對齊方式參考文章

關於柵格化布局，多元素水平居中等常見布局詳見文章