zoukankan      html  css  js  c++  java
  • div在父元素中的居中问题

    方法一:定位方法

    <div class="parent1">
        <div class="child1">
            content1
        </div>
    </div>
    .parent1{
        position:relative;
        height:300px;
         300px;
    }
    .child1{
        position:absolute;
      top:0px;
      left:0px;
      right:0px;
      bottom:0px;
      margin:auto;
    
    }
    

      

     方法二:设置父元素的css为:display:table;z子元素的为:dispaly:table-cell;vertical-align:middle;text-align:center

     

    <div class="parent2">
        <div class="child2">
            content2
        </div>
    </div>
    .parent2{
        display:table;
        height:300px;
         300px;
        background:red;
    }
    .child2{
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        background:green;
        font-size:16px;

    }

      方法三:利用transform

    <div class="parent3">
        <div class="child3">
            content3
        </div>
    </div>

    .parent3{ position: relative; height:300px; 300px; background: #FD0C70; } .parent3 .child{ position: absolute; top: 50%; left: 50%; color: #fff; background: green; transform: translate(-50%, -50%); }

      方法四:利用flex布局

    <div class="parent4">
        <div class="child4">
            content4
        </div>
    </div>
    .parent4{
        display:flex;
        justify-content:center;
        align-items:center;
        height:300px;
         300px;
        background:red;
    }
    .child4{
        background:yellow;
    
    }
    

      

     
  • 相关阅读:
    自定义文书思路
    传输
    Netty的组件和设计
    第一款Netty应用程序
    Netty异步和事件驱动
    初识MQTT
    TCP/IP协议分层模型
    uni原生插件的开发(安卓)
    uniapp离线打包记录
    日常问题处理:Linux通过设备名称如何查看硬盘SN
  • 原文地址:https://www.cnblogs.com/hl2016-10-28/p/8350757.html
Copyright © 2011-2022 走看看