最近經常碰到要垂直居中的問題，所以想著總結一下：關於如何設定小盒子在大盒子裡面水平垂直方向同時居中的實現方法有很多種，下面僅列舉了常用的幾種。
首先看一下要實現的效果圖及對應的html**：
1、使用定位的方法
.parent還有就是子元素寬高不固定時.child
//2、利用定位及margin:auto實現vertical center
.vertical-center
.vertical-horizontal
.parent實現原理是設定margin自動適應，然後設定定位的上下左右都為0,就如四邊均衡受力從而實現盒子的居中;.child
3、使用display:table-cell;
.parent實現原理：display:table-cell屬性指讓標籤元素以**單元格的形式呈現，類似於td標籤；組合使用vertical-align、text-align，可以使父元素內的所有行內元素水平垂直居中（也就是將內部的元素設定display:inline-block）.child
4、使用伸縮布局display:flex
.parent.child
DIV水平居中 垂直居中
一 css 居中 水平居中 div等標籤本身沒有定義自己居中的屬性，網上很多的方法都是介紹用上級的text align center，然後巢狀一層div來解決問題。可是這個方法有時候完全不起作用，而且對於布局是非常不科學的方法。正確的的設定寫法如下 對頁面構造沒有影響 div 這句css居中的意思就...
div水平垂直居中的方法總結
近段時間在忙於編寫靜態頁面，常常遇到div需要垂直居中的情況，下面針對div的水平垂直居中做總結，分享出來，一起 這也是自己知識點記錄的一種方式。我們都知道元素水平居中最好使的是 margin 0 auto 元素水平垂直居中 一，位置定位 元素寬高已知 1.父元素 position relative...
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...