zoukankan      html  css  js  c++  java
  • 524 垂直居中布局:table-cell+vertical-align,绝对定位position,flex + align-items





    垂直居中布局解决方案1 - table-cell+vertical-align

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>垂直居中布局解决方案1 - table-cell+vertical-align</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        #parent {
           200px;
          height: 600px;
          background: #ccc;
        }
    
        #child {
           200px;
          height: 200px;
          background: #c9394a;
    
          /* 垂直居中 */
          line-height: 200px;
        }
      </style>
    </head>
    
    <body>
      <!-- 定义父级元素 -->
      <div id="parent">
        <!-- 定义子级元素 -->
        <div id="child">水平垂直居中布局</div>
      </div>
    </body>
    
    </html>
    

    垂直居中布局解决方案2 - 绝对定位position

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>垂直居中布局解决方案2 - 绝对定位position</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        #parent {
           200px;
          height: 600px;
          background: #ccc;
          position: relative;
        }
    
        #child {
          /* 定位 - 参照物 父元素 */
           200px;
          height: 200px;
          background: #c9394a;
          position: absolute;
          top: 50%;
          /* margin-top:-100px; */
          transform: translateY(-50%);
        }
      </style>
    </head>
    
    <body>
      <!-- 定义父级元素 -->
      <div id="parent">
        <!-- 定义子级元素 -->
        <div id="child"></div>
      </div>
    </body>
    
    </html>
    

    垂直居中布局解决方案3 - flex + align-items

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>垂直居中布局解决方案3 - flex + align-items</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        #parent {
           200px;
          height: 600px;
          background: #ccc;
    
          display: flex;
          /* 垂直排列 */
          align-items: center;
        }
    
        #child {
           200px;
          height: 200px;
          background: #c9394a;
        }
      </style>
    </head>
    
    <body>
      <!-- 定义父级元素 -->
      <div id="parent">
        <!-- 定义子级元素 -->
        <div id="child"></div>
      </div>
    </body>
    
    </html>
    

  • 相关阅读:
    Builder与Factory,殊途同归!
    IIS中的身份验证
    如何给项目选择合适语言(转)
    动态行转列
    ORACLE系统表大全(转)
    C# 操作Word文档(转)
    产品化思维之分层的思想
    开发管理目前开发工作的问题分析和诊断
    MongoDB数据插入、删除、更新、批量更新某个字段
    学习正则表达式
  • 原文地址:https://www.cnblogs.com/jianjie/p/13771313.html
Copyright © 2011-2022 走看看