body結構
<body><div><img src="1.jpg" alt="haha"></div>
</body>
方法一：
將display設置成table-cell，然后水平居中設置text-align為center，垂直居中設置vertical-align為middle。
<style type="text/css">*{margin: 0;padding: 0;}div{width:150px;height: 100px;display: table-cell;vertical-align: middle;text-align: center;border:1px solid #000;}img {width: 50px;height: 50px;
}
</style>
方法二：
通過position定位來實現。將div設置成相對定位relative，將img設置成絕對定位absolute，left:50%，top:50%，此時圖片的左上角位于div的中心，要是圖片的中心位于div的中心，就需要將圖片向上移動圖片高度的一半，并向左移動圖片寬度的一半。
<style type="text/css">*{margin: 0;padding:0;}div{width:150px;height: 100px;position: relative;border:1px solid #000;}img {width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;margin-top: -25px; /* 高度的一半 */margin-left: -25px; /* 寬度的一半 */}
</style>
方法三：可以用在不清楚圖片圖片或元素的真實寬高情況下
還是通過position定位來實現。將div設置成相對定位relative，將img設置成絕對定位absolute，left:50%，top:50%，此時圖片的左上角位于div的中心，要是圖片的中心位于div的中心，就需要將圖片向上移動圖片高度的一半，并向左移動圖片寬度的一半，如果不知道元素的寬高，可以用transform: translate(-50%,-50%);
<style type="text/css">*{margin: 0;padding:0;}div{width:150px;height: 100px;position: relative;border:1px solid #000;}img {width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
</style>
#####方法四：
<style type="text/css">*{margin: 0;padding:0;}div{width:150px;height: 100px;position: relative;border:1px solid #000;}img {width: 50px;height: 50px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
</style>
#####方法五：彈性布局flex
<style type="text/css">*{margin: 0;padding:0;}div{width:150px;height: 100px;border:1px solid #000;display: flex;justify-content: center;align-items: center;}img {width: 50px;height: 50px;}
</style>
![[ 懶人神器 ] —— OO一鍵build：.zip - .jar](http://pic.xiahunao.cn/[ 懶人神器 ] —— OO一鍵build：.zip - .jar)
![Luogu 3698 [CQOI2017]小Q的棋盤](http://pic.xiahunao.cn/Luogu 3698 [CQOI2017]小Q的棋盤)
)
)
