zoukankan      html  css  js  c++  java
  • 一个div相对于外层的div水平和垂直居中

    我自己感觉,第四种比较常用

    <title>无标题文档</title>
    <style>
            .parent {
              800px;
              height:500px;
              border:2px solid #000;
              position:relative;
              }
             .child {
                200px;
                height:200px;
                margin: auto;  
                position: absolute;  
                top: 0; left: 0; bottom: 0; right: 0; 
                background-color: red;
             } 
      
      
            .parent1 {
                800px;
                height:500px;
                border:2px solid #000;
                display:table-cell;
                vertical-align:middle;
                text-align: center;
            }
            .child1{
                200px;
                height:200px;
                display:inline-block;
                background-color: red;
            } 
      
      
      .parent2{
                800px;
                height:500px;
                border:2px solid #000;
                display:flex;
                justify-content:center;
                align-items:center;
            }
            .child2{
                200px;
                height:200px;
                background-color: red;
            }
      
      
      
       .parent3 {
                800px;
                height:500px;
                border:2px solid #000;
                position:relative;
            }
            .child3 {
                300px;
                height:200px;
                margin:auto;
                position:absolute;/*设定水平和垂直偏移父元素的50%,
    再根据实际长度将子元素上左挪回一半大小*/
                left:50%;
                top:50%;
                margin-left: -150px;
                margin-top:-100px;
                background-color: red;
            } 
     
    </style>

    </head>

    <body>
    <div class="parent">
       <div class="child">第一种方法</div>
    </div>

    <div class="parent1">
       <div class="child1">第二种方法</div>
    </div>

    <div class="parent2">
       <div class="child2">第三种方法</div>
    </div>

    <div class="parent3">
       <div class="child3">第四种方法</div>
    </div>
     
    </body>
    </html>

  • 相关阅读:
    潭州课堂25班:Ph201805201 django 项目 第二课 git 版本控制 (课堂笔记)
    HTML中的转义字符
    Java防止SQL注入
    Web很脆弱,SQL注入要了解
    防止sql注入:替换危险字符
    Hadoop HA详解
    java代码---charAt()和toCharry()的用法
    java代码-----计算器,界面+功能+boolean
    java代码-----运用endWith()和start()方法
    java代码---indexOf()方法
  • 原文地址:https://www.cnblogs.com/275147378abc/p/5933537.html
Copyright © 2011-2022 走看看