zoukankan      html  css  js  c++  java
  • div水平垂直居中的六种方法

    在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现。

    方法一:

      绝对定位方法:不确定当前div的宽度和高度,采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位(position: relative;

      图片展示:

      

      代码如下:

    div{
        background:red;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
    } 
    

     

    方法二:

      绝对定位方法:确定了当前div的宽度,margin值为当前div宽度一半的负值

      图片展示: 如方法一的图片展示

      代码如下:

    div{
        600px;
        height: 600px;
        background:red;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-300px;
        margin-top:-300px;
    } 
    

      

    方法三:

      绝对定位方法:绝对定位下top left right bottom 都设置0

      图片展示: 如方法一的图片展示

      代码如下:

    <!--html-->
    <div class="child">我是子级</div>
    /**css**/
    div.child{
         600px;
        height: 600px;
        background: red;
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
    

      

    方法四:

      flex布局方法:当前div的父级添加flex css样式

          展示图如下:

      

      代码如下:

    <!--html-->
    <div class="box">
        <div class="child">child</div>
    </div>
    /**css**/
    .box{
        height:800px;
        -webkit-display:flex;
        display:flex;
        -webkit-align-items:center;
        align-items:center;
        -webkit-justify-content:center;
        justify-content:center;
        border:1px solid #ccc;
    }
    div.child{
        600px;
        height:600px;
        background-color:red;
    }
    

      

    方法五:

      table-cell实现水平垂直居中: table-cell middle center组合使用

          展示图如下:

        

          代码如下:

    <!--html-->
    <div class="table-cell">
        <p>我爱你</p>
    </div>
    /**css**/
    .table-cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
         240px;
        height: 180px;
        border:1px solid #666;
    }
    

      

    方法六:

      绝对定位:calc() 函数动态计算实现水平垂直居中

      展示图如下:

      代码如下:

    <!--html-->
    <div class="calc">
        <div class="child">calc</div>
    </div>
    /**css**/
    .calc{
      position: relative;
    border: 1px solid #ccc;
    400px;
    height: 160px; } .calc .child{ position: absolute;
    200px;
    height: 50px; left:-webkit-calc((400px - 200px)/2); top:-webkit-calc((160px - 50px)/2); left:-moz-calc((400px - 200px)/2); top:-moz-calc((160px - 50px)/2); left:calc((400px - 200px)/2); top:calc((160px - 50px)/2); }  
  • 相关阅读:
    上下伸展的JS菜单
    [ZZ]Debug VBScript with Visual Studio
    面试总结之杂题
    [ZZ]9 Confusing Naming Conventions for Beginners
    Robocopy
    [ZZ]什么是Alpha,Beta,RC,RTM,CTP版
    使用位运算交换两个值,不用临时变量
    学习笔记之编程之美微软技术面试心得(一)
    C#中如何获取系统环境变量
    学习笔记之SQL教程 from W3School
  • 原文地址:https://www.cnblogs.com/a-cat/p/9019184.html
Copyright © 2011-2022 走看看