zoukankan      html  css  js  c++  java
  • 【页面架构】垂直居中

    1.display: table-cell + vertical-align: middle

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>垂直居中</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <style type="text/css">
        body{margin:20px;}
        .parent{width:4em;height:500px;}
        .child{width:100%;}
        
        .parent{
            display: table-cell;
            vertical-align: middle;
        }
    </style>
    </head>
    <body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
    </body>
    </html>

    2.position + transform

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>垂直居中</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <style type="text/css">
        body{margin:20px;}
        .parent{width:4em;height:500px;}
        .child{width:100%;}
    
        .parent{
            position: relative;
        }
        .child{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
    </head>
    <body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
    </body>
    </html>

    3.display: flex + align-items: center

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>垂直居中</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <style type="text/css">
        body{margin:20px;}
        .parent{width:4em;height:500px;}
        .child{width:100%;}
    
        .parent{
            display: flex;
            align-items: center;
        }
    </style>
    </head>
    <body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
    </body>
    </html>

     附录:demoe.css

    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}
    pre,code,kbd,samp{font-family:inherit;}
    q:before,q:after{content:none;}
    textarea{overflow:auto;resize:none;}
    label,summary{cursor:default;}
    a,button{cursor:pointer;}
    h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;}
    del,ins,u,s,a,a:hover{text-decoration:none;}
    body,textarea,input,button,select,keygen,legend{font:30px/1.5 'microsoft yahei';color:#333;outline:0;}
    body{background:#fff;}
    a,a:hover{color:#333;}
    .parent{background:#ddd;}
    .child{background:#666;color:#fff;}
  • 相关阅读:
    ZOJ 3765 Lights (zju March I)伸展树Splay
    UVA 11922 伸展树Splay 第一题
    UVALive 4794 Sharing Chocolate DP
    ZOJ 3757 Alice and Bod 模拟
    UVALive 3983 捡垃圾的机器人 DP
    UVA 10891 SUM游戏 DP
    poj 1328 Radar Installatio【贪心】
    poj 3264 Balanced Lineup【RMQ-ST查询区间最大最小值之差 +模板应用】
    【转】RMQ-ST算法详解
    poj 3083 Children of the Candy Corn 【条件约束dfs搜索 + bfs搜索】【复习搜索题目一定要看这道题目】
  • 原文地址:https://www.cnblogs.com/zachary93/p/6084260.html
Copyright © 2011-2022 走看看