论坛首页 Web前端技术论坛

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

浏览 1636 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2016-04-13  
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>
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics