方法一：
容器确定宽高：知识点：transform只能设置在display为block的元素上。
<head>
???<meta charset="UTF-8">
???<title>Title</title>
???<style type="text/css">
???????#container{
???????????width: 500px; /* 确定！*/
???????????height: 300px;
???????????background-color: pink;
???????}
???????#child{
???????????width: 100px; /* 如果没有宽度，div充满容器，怎么水平居中 */
???????????position: relative; /* 相对父容器进行定位，规定top left值 */
???????????top: 50%;
???????????left: 50%;
???????????transform: translate(-50%, -50%); /* 如果不设置这个，其实是子div的左上原点是水平垂直居中，这个translate百分比是自身的百分比*/
???????????text-align: center; /* 里面的文字居中 */
???????}
???</style>
</head>
<body>
<div id="container">
???<div id="child">哈哈哈哈</div>
</div>
</body>
方法一效果图:
方法二：
利用 flex 布局 实际使用时应考虑兼容性，flex不兼容ie9
父容器高度没有设置，那么其高度就是子容器撑开的，也就没有垂直居中这一说，只需要水平居中即可。
.container { ????display: flex; ????align-items: center; ????????/* 垂直居中 */ ????justify-content: center; ???/* 水平居中 */ } .container div { ????width: 100px; ????height: 100px; ????background-color: pink; ???????/* 方便看效果 */ } ?CSS 水平垂直居中
原文地址：https://www.cnblogs.com/yadiblogs/p/9502530.html