網上關於div水平垂直居中的文章層出不窮，對於div水平垂直居中的方法最多可至七八種，經過筆者對於一些大廠的**的原始碼進行檢視和研究發現他們所用到的方法無外乎以下幾種，所以小夥伴們在以後的實際開發的過程中或者面試的過程中再涉及到div水平垂直居中的問題時可以參考以下方法。
.parent.parent
.child
.parent
.child
.parent
.child
.parent
.child
.parent
.child
對於一些前端小白來說，可能對於方法3中的transform和translate
會有些許陌生，所以筆者在這裡解釋一下transform屬性的用法以及使用方法3進行水平垂直局中的原理。
transform：transform屬性應用於元素的2d或3d轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。
transform屬性詳解以及示例
方法3原理：
當使用：top: 50%;left: 50%的時候是以（child的）左上角為原點，所以child整體並未處於中心位置，translate(-50%,-50%) 是將child往上（x軸）,左（y軸）移動自身（child）長寬的 50%，這樣便處於了中心位置。感興趣的同學可以自己研究一下其它方法的原理。
DIV水平居中 垂直居中
一 css 居中 水平居中 div等標籤本身沒有定義自己居中的屬性，網上很多的方法都是介紹用上級的text align center，然後巢狀一層div來解決問題。可是這個方法有時候完全不起作用，而且對於布局是非常不科學的方法。正確的的設定寫法如下 對頁面構造沒有影響 div 這句css居中的意思就...
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寬度後，設定 即可實現 div水平居中，示例 css 1.html 1.class cdiv fufuok.com div水平垂直居中顯示 將 left 和top 設定為50 來定位div 到瀏覽器 再將 margin left 和margin top 值設定為寬和高...