css使图片垂直居中

第一种方法

 <style type="text/css">
      .first{
          width: 500px;
          height: 500px;
          border: 1px solid black;
          margin-left: 50%;
          transform: translateX(-50%);
         text-align: center;
      }
      .second{
          width: 200px;
          height: 200px;
          border: 1px solid black;
         display: inline-block;
         vertical-align: middle;
      }
      span{
          height: 500px;
          display: inline-block;
          vertical-align: middle;
      }
    </style>
</head>
<body>
    <div class="first">
        <span></span>
       <div class="second">

       </div>
    </div>
  
</body>

第二种方法

 <style type="text/css">
      .first{
          width: 500px;
          height: 500px;
          border: 1px solid black;
          margin-left: 50%;
          transform: translateX(-50%);
         position: relative;
      }
      .second{
          width: 200px;
          height: 200px;
          border: 1px solid black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
     
    </style>
</head>
<body>
    <div class="first">
        <span></span>
       <div class="second">

       </div>
    </div>
  
</body>

来源：CSDN

作者：cp123153

链接：https://blog.csdn.net/cp123153/article/details/104136689

标签

垂直居中

500px

css

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!