在寫代碼前，先做下准備工作，寫兩個div,設置下div的大小，把小的div放在大的div里面。可以給小的div設置下顏色，方便觀看.
方法一：寫一個偽元素，將它設置為行內塊元素，高度與父元素相同，寫一條屬性，vertical-align:middle,子元素也要寫，具體代碼如下：
<style> div{width:500px;height:500px;box-shadow:0 0 5px #000; text-align:center;} .zi{width:100px;height:100px;background:#60C;display:inline-block;vertical-align:middle;} div:after{content:""; height:500px; background:#00C;display:inline-block;vertical-align:middle;} </style> </head> <body> <div > <div class="zi"></div> </div>
方法二：利用定位，給大的div寫一個position:relative;子元素寫position:absolute; 這時子元素的包含塊就是外面大的div,然后給里面的div寫一下位置left:0;right:0;top:0;bottom:0;margin:auto;主要看一下CSS中的樣式，具體代碼如下：
div{width:500px;height:500px;box-shadow:0 0 5px #000; position:relative;}
.zi{width:100px;height:100px;background:#60C; position:absolute; left:0;right:0;top:0;bottom:0;margin:auto;}
.zi{width:100px;height:100px;background:#60C; position:absolute; left:0;right:0;top:0;bottom:0;margin:auto;}
方法三：與方法二類似，也是用到定位，但是區別在於調整里面div位置時，不寫right:0;bottom:0;而是使用margin可以設置負數，調整里面div的位置，具體代碼如下：
div{width:500px;height:500px;box-shadow:0 0 5px #000; position:relative;} .zi{width:100px;height:100px;background:#60C;position:absolute;left:50%;top:50%; margin:-50px 0 0 -50px;
方法四：這種方法是在前一種方法上的延申，只是不是用margin，而是使用transform：translate()可以在不知道寬高的情況下進行居中，tranlate（）函數是相對於自身的。
具體代碼如下：
div{width:500px;height:500px;box-shadow:0 0 5px #000;position:relative;} .zi{width:100px;height:100px;background:#60C;position:absolute;left:50%;top:50%;transform:translate(-50px,-50px);}
方法五：使用彈性盒，給父元素設置這三條屬性display:flex; 水平方向居中 justify-content:center;垂直方向居中align-items:center;具體代碼如下：
div{width:500px;height:500px;box-shadow:0 0 5px #000; display:flex; justify-content:center;align-items:center;} .zi{width:100px;height:100px;background:#60C;}