<html> <head> <meta name="viewport" content="width=device-width, minimum-scale=0.1"> <title>垂直水平居中</title> </head> <style> /*1 绝对定位+margin */ #container1 { } #center1 { position:absolute; left: 0; right: 0; top: 0; bottom: 0; margin:auto; } /*2 flex 需要设置父容器高度*/ #container2 { height: 800px; display: flex; justify-content: center; align-items: center; } /*3 table-cell 需要设置父容器宽高*/ #container3{ width: 1000px; height: 800px; display:table-cell; text-align:center; vertical-align:middle; } /*4 transform */ #container4{ position: relative; } #center4{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } h1{ color: #fff; } </style> <body style="margin: 0px; background: #0e0e0e;"> <h1>推荐 绝对定位+margin 和 transform</h1> <div id="container2"> <img id="center2" style="-webkit-user-select: none;" src="http://picttypec.jnby.com/20180930-jifen-JNBY1.jpg"> </div> </body> </html>