第一種： 伸縮盒子，要定義在父類
display: flex;
justify-content: center; //水平居中
align-items: center;//垂直居中
注意：不能加margin，否則無效，padding（是否能加？）
第二種：不知道盒子長寬：（比較好）
top、right、bottom、left全爲0， margin: auto;//垂直水平居中：
position: relative;//給父盒子相對定位，
position: absolute;//給子盒子絕對定位，
第三種：知道盒子長寬
父元素相對定位
子元素絕對定位
left: 50%;top: 50%;
margin-left: 負的子盒子寬度一半。
margin-top: 負的子盒子高度一半；
第四種：使用css3 translate屬性，使用的是偏移量
給父盒子相對定位，position: relative;
給子盒子絕對定位，position: absolute;
子盒子：
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
第五種：
設置盒子外邊框，使外盒子居中，左右外邊框值相等（長度未知）
水平居中:在div的position爲relative（相對定位時有效，絕對定位無效）
水平居中：給div設置一個寬度，然後添加margin:0 auto屬性
————————————————
版權聲明：本文爲CSDN博主「HDdgut」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/HDdgut/article/details/96199774