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

    实现一:

    <!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:200px;height:300px;}
        
        .parent{
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .child{
            display: inline-block;
        }
    </style>
    </head>
    <body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
    </body>
    </html>

    实现二:

    <!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:200px;height:300px;}
        
        .parent{
            position: relative;
        }
        .child{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
    </head>
    <body>
    <div class="parent">
        <div class="child">DEMO</div>
    </div>
    </body>
    </html>

    实现三:

    <!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:200px;height:300px;}
        
        .parent{
            display: flex;
            justify-content: center;
            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;}
  • 相关阅读:
    PostgreSQL pg_ident.conf 文件简析
    使用 iptables 限制黑客猜密码续—深入 recent 模块
    从零开始安装 Drupal 7
    使用tween.js移动three.js相机创建转场动画
    容器化导致RocketMQ消息囤积的原因和解决方案
    linux序章(第一集)
    使用DockerFile 构建nginx镜像
    git的常用指令
    使用docker起一个mysql服务
    Windows 8自动登录
  • 原文地址:https://www.cnblogs.com/zachary93/p/6084277.html
Copyright © 2011-2022 走看看