這個問題好像面試必問的！以前我問時不時會問一下，基礎的給分題。
方法1、定位
盒子寬高已知，
position: absolute;
left: 50%;
top: 50%;
margin-left:-自身一半寬度;
margin-top: -自身一半高度;
方法2、table-cell布局
父級 display: table-cell; vertical-align: middle;
子級 margin: 0 auto;
方法3、定位 + transform ;
適用於 子盒子 寬高不定時； （常用方法）
position: relative / absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
注意這裡啟動了3D硬件加速哦 會增加耗電
方法4、flex 布局
父級：
display: flex;
align-items: center;/*垂直居中*/
justify-content: center;/*水平居中*/
感謝收看本期Q程序員說，最後別忘點贊加關注哈！有問題可留言討論。
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/253504.html
微信掃一掃 
支付寶掃一掃 