水平居中的實現很簡單，這兒就不贅述了。
行內元素使用：text-align:center 可以做到水平居中
塊級元素使用：margin: 0 auto 可以做到水平居中
單行的垂直居中可以通過設定元素line-height為父元素的高度，完成垂直居中
display
:table-cell;
vertical-align
: middle;
position
: relative;
//非static就行
position
: relative;
top: 50%;
height
: 50%;
margin-top
: -300px;
// 1/2的子元素高度
margin-left
: -250px;
// 1/2的子元素寬度
缺點：由於transform屬性是css3屬性，ie9以下無法使用
父元素：
position
: relative;
//非static就行
position
: absolute;
top:50%;
left
: 50%;
transform
:translate(-50%,-50%);
優點：支援跨瀏覽器，包括ie8-ie10；
缺點：必須宣告高度（檢視可變高度variable height）；在windows phone裝置上不起作用。
.absolute-center
缺點：需要乙個容器、水平居中依賴於margin-left: -0.25em;該尺寸對於不同的字型/字型大小需要調整、內容塊寬度不能超過容器的100% - 0.25em。
父元素：
text-align: center;
overflow: auto;
display: inline-block;
vertical-align: middle;
content
: '';
height
: 100%;
margin-left
: -0.25em;
/* to offset spacing. may vary by font */
CSS水平居中和垂直居中的若干方法
從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。css居中分為水平居中和垂直居中，水平居中方式也較為常見和統一，垂直居中的方法就千奇百怪了。本文是我積累的若干css居中的方法，先後討論了塊級元素的和行內元素的垂直居中和水平居中，特此記錄下來與大家分享。如有敘述不當的地方，還望指出。o 本...
垂直水平居中的幾種方法
father son 效果圖 當元素絕對定位時，它會根據離他最近的乙個非static定位的父元素進行定位，這裡應該根據父元素定位。father son 效果圖 首先用top 50 和left 50 讓子元素的座標原點 左上角 移動到父元素的中心，然後再利用負margin讓它往左偏移自身寬的一半，再往...
css水平垂直居中多種方法
結構 parent childblock 塊級元素 inline 內聯元素 text align有效 width,height無效 文字稱開 inline block 行內塊級元素 塊 內 注意 width,height有效 結構 child會導致脫離文件流 浮動float，設定絕對定位，固定定位 ...