CSS实现垂直居中的常用方法

首先定义一个需要垂直居中的div元素,宽高均设置为200px;

如下:

<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <title>demo</title>
   <style>
      html,body{
          width:100%;
          height:100%;
          margin:0;
          padding:0;
      }
      .content{
          width:200px;
          height:200px;
          background-color:#ccc;
          margin:0 auto;
          position:relative;
          top:50%;
          margin-top:-150px;
      }
   </style>
</head>
<body>
   <div class="content"></div>
</body>

相关推荐