近段時間在忙於編寫靜態頁面，常常遇到div需要垂直居中的情況，下面針對div的水平垂直居中做總結，分享出來，一起**，這也是自己知識點記錄的一種方式。
我們都知道元素水平居中最好使的是：
margin: 0 auto;
一，位置定位（元素寬高已知）
1.父元素：position：relative;
2.子元素：position：absolute;
.boxset
.contentset
1.父元素：position：relative;
2.子元素：position：absolute;
position + transform
.boxset
.contentset
1.父元素：position：relative;
2.子元素：position：absolute;元素距上，下，左，右都為0，元素的margin值為auto。
（相容性較好，支援ie7 +的瀏覽器）
例：
.boxset
.contentset
1.設定子元素為行內塊元素,讓他們都排成一行， display:inline-block；
2.給它的父容器加乙個text-align:center的樣式，
設定行高為父元素的高。
例：
.boxset
.contentset
例：
flex布局
.boxset
.contentset
例：
inline-block+vertical-align+偽類實現
.boxset
.boxset:before
.contentset
1.table-cell相當與**的td，td為行內元素，無法設定寬和高，所以巢狀一層，巢狀一層必須設定display: inline-block;td的背景覆蓋了。不推薦使用。
（ie8及以下不支援）
例：
.boxset
.contentset
.inner
div水平居中及div水平垂直居中的方法總結
1 margin auto wrap wrap txt2 text align center 3 absolute margin偏移 wrap wrap txt4 display box 文字 box pack5 absolute transform 1 line height 文字 wrap tx...
div水平垂直居中的方法
在平時，我們經常會遇到讓乙個div框針對某個模板上下左右都居中 水平垂直居中 其實針對這種情況，我們有很多種方法實現。方法一 絕對定位法，不確定當前div寬度和高度，採用 transform translate 50 50 當前div的父級新增相對定位 position relative 效果圖 方...
DIV水平居中 垂直居中
一 css 居中 水平居中 div等標籤本身沒有定義自己居中的屬性，網上很多的方法都是介紹用上級的text align center，然後巢狀一層div來解決問題。可是這個方法有時候完全不起作用，而且對於布局是非常不科學的方法。正確的的設定寫法如下 對頁面構造沒有影響 div 這句css居中的意思就...