zoukankan      html  css  js  c++  java
  • 如何使div居中

    今天要讲的主要内容如题,**即如何在一个div中使其子div居中**。
    我在网上其他地方也看到过对其的不同实现方式,几天主要做一个详细的汇总,希望对大家有帮助。
    
    
    假设父div的类名为father,子div的类名为son。在html中的形式如下:
    <div class="father">
           <div class="son">
      </div>
    接下来用css设置son居中的方法主要有4种。
    
    1. 方法一(使用绝对布局): 
      .father{ 
      500px; 
      height:500px; 
      position:relative; 
      background-color:red; 
      } 
      .son{ 
      200px; 
      height:200px; 
      position:absolute; 
      top:50%; 
      left:50%; 
      margin-top:-100px; 
      margin-left:-100px; 
      background-color:black; 
      } 
      效果图如下: 
      上面son类的margin-top是取自身高一半值的负数,margin-left同理

    2. 方法二(使用table-cell形式) 
      .father{ 
      500px; 
      height:500px; 
      display:table-cell; 
      text-align:center; 
      vertical-align:middle; 
      background-color:red; 
      } 
      .son{ 
      200px; 
      height:200px; 
      display:inline-block; ps:这句话一定要加,不然没效果哦 
      background-color:black; 
      } 
      效果如上 
      3.方法三(使用弹性布局flex) 
      .father{ 
      500px; 
      height:500px; 
      display:flex; 
      justify-content:center; 内容水平居中 
      align-items:center; 内容垂直居中 
      background-color:red; 
      } 
      .son{ 
      200px; 
      height:200px; 
      background-color:black; 
      } 
      效果如上 
      4.方法四(使用绝对布局) 
      .father{ 
      500px; 
      height:500px; 
      display:relative; 
      background-color:red; 
      } 
      .son{ 
      200px; 
      height:200px; 
      position:absolute; 
      top:0; 
      right:0; 
      bottom:0; 
      left:0; 
      margin:auto; 
      background-color:black; 
      } 
      效果如上

    这是目前我所了解的4种方法,ie和chrome都兼容,其他浏览器没测,目测是都兼容的。欢迎大家查漏补缺!

  • 相关阅读:
    c++ CPO ADL
    c++ intrusive
    c++边界检查
    C++仿函数
    C++ RefBase
    c++ vector容器的尺寸问题
    关于调用约定
    C++学习之字符串类、容器
    C++异常
    Git常用命令大全,迅速提升你的Git水平
  • 原文地址:https://www.cnblogs.com/dej-11/p/8279150.html
Copyright © 2011-2022 走看看