元素的水平及垂直居中是在寫css樣式中最常遇到的問題之一。相信會css的同學肯定都有自己的解決方法，但是並不一定都能熟練運用，並且知道其中原理。下面，我就將自己總結的實現方法分享給大家。
ps：重點是第四，疑惑在第三，第
一、第二也較常用
為本文製作的demo：元素居中顯示這裡的單行文字不僅是指單行顯示的文字以及行內元素（設定了
display: inline;的也是行內元素），當然這些元素也只有包含文字才有意義，才能顯示出來。
/* 父元素*/
div
具體原因請參考文章：對文字和行高的理解這裡的多行文字，實際上應該說是不定行，這個方法能自適應的居中。
/* 父元素*/
div
table-cell，建立類似**單元的元素，就可以使用vertical-align設定垂直對齊方式。
注意：在一些文章中，我看到還需要設定其子元素的這裡泛指行內塊元素vertical-align，但是在實踐中發現並不需要。與下面使用table-cell的方法有所區別
/* 父元素*/
div
/* 子元素img*/
img
注意：在一些文章中，在父元素上還新增了font-size的大小控制，在我的實踐中，不新增font-size可以實現效果。但是，當font-size達到一定程度的時候，會有影響。
/* 父元素*/
div
/* 子元素img*/
img
font-size達到一定大小就會影響行內元素的垂直位置，具體是什麼原因不明確，但是感覺是跟vertical-align以及行高有關。
注意：這個方法的原本是在父元素上加盒子主要指塊元素和行內塊，下面分享的是布局中主要用到的。display: inline-block;的，實踐發現並不需要，只要裡面的是行內塊元素就可以了。使用這個方法特別注意的是父元素font-size與子元素height的比例關係，因為不可控，所以不推薦使用。
margin: 0 auto就不做介紹了。
/* 父元素 */
.demo
/* 子元素 */
.box
position移動父元素寬高的一半，再利用負margin往回移動子元素寬高的一半，剛好居中對齊。適合固定寬高的元素。
/* 父元素 */
.demo
/* 子元素 */
.box
translate3d往回移動。子元素不固定寬高也適用。
這就是前面提到的方法，只不過要設定子元素為display: inline-block;
這才是真正的布局神器。適用於所有，但也需要靈活應用。
.demo詳細語法請檢視我的博文：關於flex布局
CSS實現元素水平居中
元素主要分為塊級元素和行內元素，所以對元素進行水平居中也分這兩種情況來討論，另外塊級元素的實現比較複雜，將分情況討論。常用行內元素為a img input span等，標籤內的html文字也屬於此類。對於此類情況，水平居中是通過給父元素設定text align center來實現的。html結構 h...
CSS實現元素垂直居中
對元素的垂直居中針對於單行元素和多行元素將分情況討論。父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line height 高度一致來實現的。html結構 hello world css樣式 對於父元素高度不確定的文字 等的塊級元素的豎直居中可以設定相同的上下內邊距 ...
css的實現元素垂直居中
經常在寫 的時候碰到垂直居中的問題，我一般用的多的是絕對定位加負的margin或者display table來實現居中。但是實際專案中，常常有一些特殊的情況，讓上述方法使用起來並不是那麼的靠譜。因此，更多行之有效的方法就顯得尤為重要了。說明部分 正文開始 子div居中 這個方法使用絕對定位的div，...