响应式居中-在整个屏幕最中间的位置-雪哥尔


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>加载中...</title>
    <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      background: rgb(14, 30, 37);
      color: white;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    h1 {
      margin: 0;
      font-size: 22px;
      line-height: 24px;
    }

    .main {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      width: 100vw;
    }

    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 75%;
      max-width: 364px;
      padding: 24px;
      background: white;
      color: rgb(14, 30, 37);
      border-radius: 8px;
      box-shadow: 0 2px 4px 0 rgba(14, 30, 37, .16);
    }

    a {
      margin: 0;
      text-decoration: none;
      font-weight: 600;
      line-height: 24px;
      color: #007067;
    }

    a svg {
      position: relative;
      top: 2px;
    }

    a:hover,
    a:focus {
      text-decoration: underline;
      text-decoration-color: #f4bb00;
    }

    a:hover svg path{
      fill: #007067;
    }

    p:last-of-type {
      margin-bottom: 0;
    }

    </style>
  </head>
  <body>
    <div class="main">
      <div class="card">
        <div class="header">
          <h1>我在中间</h1>
        </div>
        <div class="body">
          <p>这是居中框中的内容</p>
        </div>
      </div>
    </div>
  </body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END

CSS

响应式居中-在整个屏幕最中间的位置

请登录后发表评论