我們在實際工作中常會遇到需要設定居中的場景，居中分為水平居中和垂直居中。針對不同的情況又有不同的實現方式，例如行內元素和塊狀元素。
水平居中：
行內元素：text-align:center；//這個比較簡單
塊狀元素：定寬的塊狀元素通過設定左右margin為auto實現，例如margin：10px auto；不定寬的塊狀元素：加入 table 標籤後按照定寬元素進行設定；設定 display: inline 後按照行內元素設定；設定position:relative left:50% 通過給父元素設定 float，然後給父元素設定position:relative 和 left:50%，子元素設定 position:relative 和 left: -50% 來實現水平居中。
垂直居中：
例子1.
對於單行文字最簡單的垂直居中就是利用line-height，首先，定義整個div的高度，然後再設定line height 的值等於div高度，這樣就實現了單行文字的居中效果。
例子2.
#parent
#parent img
整個div 居中
content here
#parent
#child
//display:table-cell;ie8以下不支援。
ie8以下的瀏覽器可以使用
#child
html:
content here
css：
#parent
#child
CSS實現水平居中和垂直居中
行內元素 為父元素設定中 text align center 樣式 style text align center 行內元素水平居中span div 定寬塊級元素 定義元素左右margin為auto style width 100px height 100px background color gr...
CSS 垂直居中和水平居中
position relative width 500px height 500px background color ddd content background color 6699ff width 50 height 50 position absolute top 25 left 25 這兩...
CSS垂直居中和水平居中
總括 css居中一直是乙個比較敏感的話題，為了以後開發的方便，樓主覺得確實需要總結一下了，總的來說，居中問題分為垂直居中和水平居中，實際上水平居中是很簡單的，但垂直居中的方式和方法就千奇百怪了。人生用物，各有天限 夏澇太多，必有秋旱。水平居中設定 行內元素 設定 text align center ...