水平居中
若元素為inline元素
比如a,b,strong,i,span,img,input,select等，
為父元素設定text-align: center; 即可。
若元素為block元素
比如div,p,ul,li,ol,h1-h6,dl,dt,dd,address,article等
width: 固定;
margin: 0 auto;
複製程式碼使用flex
display: flex;
flex-direction:row; /*設定主軸方向為水平方向(預設)*/
justify-content: center; /*主軸對齊方式*/
複製程式碼相容性：IE8/9不支援。
使用CSS3中新增的transform屬性
.parent{ position: relative;}
.son{
position:absolute;
top: 50%;
left: 50%;
/*往上（x軸）,左（y軸）移動自身長寬的 50%，以使其居於中心位置。*/
transform:translate(-50%, -50%);
}
複製程式碼相容性：IE8不支援。
絕對定位方式
- 設定margin負半值
position: absolute; /*注意絕對定位*/
width: 固定;
left: 50%; /*偏移量設定為50%*/
margin-left: -0.5寬度; /* -寬度/2*/
複製程式碼- 設定
left:0; right:0; margin:0 auto;
position: absolute;
width: 固定;
left: 0;
right: 0;
margin: 0 auto;
複製程式碼垂直居中
若元素是單行文字
設定line-height等於父元素的高度。
這種方法只適用於單行文字的元素，比如塊級元素裡面文字、圖片。
若元素為行內塊元素（流行）
給元素設定display:inline-block;屬性，需要使用一個偽元素讓內容塊處於容器的中央, 注意要給這個偽類高度設定高度100%。
.parent::after, .son{ /*父級元素和子元素都設定display:inline-block*/
display:inline-block;
vertical-align: middle; /*設定vertical-align:middle*/
}
.parent::after{ /*父元素新增一個偽類,並且設定高度100%*/
content:"";
height:100%;
}
複製程式碼相容性：IE6及以下不可用
使用flex
display: flex;
align-items: center; /*居中*/
複製程式碼絕對定位方式
- 設定margin負半值，且父元素為相對定位
position: absolute;
top: 50%;
height: 固定;
margin-top: -0.5高度;
複製程式碼- 設定
top:0; bottom:0; margin:0 auto;
position:absolute;
height:固定;
top:0;
bottom:0;
margin:auto 0;
複製程式碼總結
flex, transform, 絕對定位 這幾種方法同時適用於水平居中和垂直居中。