图片水平居中

2019-06-20 179 阅读1分钟

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  
  .test{
    height: 400px;
    width: 600px;
    border: 1px solid;
    text-align: center;
    margin: 10px auto;
  }
  
  .test:after{
    display: inline-block;
    content: "";
    height: 100%;
    width: 0;
    background: #1E9FFF;
    vertical-align: middle;
  }
  
  
  .image{
    width: 150px;
    vertical-align: middle;
  }
</style>
<body>
<div class="test">
  <img src="../img/guass1.jpg" alt="" class="image">
</div>
</body>
</html>