1、 需要水平垂直居中的元素的父級設定：position：relative；
再給該元素設定：position：absolute;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
overflow:auto;
(不需要給該元素設定寬高)
注意：高度必須定義，建議加overflow: auto，防止內容溢位。
2、 需要水平垂直居中的元素的父級設定：position：relative；
再給該元素設定：position：absolute;
width:200px;
height:200px;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
(需要給該元素設定寬高)
3、 彈性盒模型方法(注意相容)
在該元素的父級設定css屬性
display:box;
display:-webkit-box;
display:-moz-box;
display:-ms-flexbox;
display:-o-box;
//還是在父級寫
-webkit-box-pack:center;
-moz-box-pack:center;
-o-box-pack:center;
box-pack:center;
-webkit-box-align:center;
-o-box-align:center;
-moz-box-align:center;
box-align:center;
4、 display:table-cell方法（父元素中設定）(子元素高 > 父元素高，父元素高會被撐開)
.eg5、假設元素寬高設定為百分比，如何讓它水平垂直居中
假設該元素div的 width：30%；
height：20%；
div
元素水平垂直居中
lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行，支援ie8 block1 block1 before center1 不...
元素水平垂直居中
給子元素設定以下內容 給父元素新增屬性 display flex align items center justify content center 先給元素設定絕對定位，再依次新增以下屬性，具體 如下所示。position absolute top 0 left 0 right 0 bottom ...
元素水平垂直居中
只可用於定寬高元素 doctype html html lang en head meta charset utf 8 title 垂直居中 title style type text css body parent container style head body div id parent d...