zoukankan      html  css  js  c++  java
  • 垂直水平居中

    1.绝对定位

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

     
    #box1{
        width: 600px;
        height: 600px;
        border: 1px solid blue;
        position: relative;
    }
    .box1{
        width: 300px; /*此值可以随意改变 */
        height: 300px;/*此值可以随意改变 */
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }
     
    <div id="box1">
        <div class="box1"></div>
    </div>
     

    2.绝对定位

    确定当前div的宽度和高度,margin值为当前div的一半

     
    <style> 
        #box2{
            width: 600px;
            height: 600px;
            border: 1px solid yellow;
            position: relative;
        }
        .box2{
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -150px;
            margin-top: -150px;
       }
    </style>
    <div id="box2">
        <div class="box2"></div>
    </div>
     
    3.绝对定位:top left right bottom都为0 ;
    #box3{
        width: 600px;
        height: 600px;
        border: 1px solid yellow;
        position: relative;
    }
    .box3{
        width: 300px;
        height: 300px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
     
    <div id="box3">
        <div class="box3"></div>
    </div>
     
    4.flex布局
    #box4{
        width: 600px;
        height: 600px;
        border: 1px solid yellow;
        display:flex;
        -webkit-display:flex;
        align-items:center;
        -webkit-align-items:center;
        -webkit-justify-content:center;
        justify-content:center;
    }
    .box4{
        width: 300px;
        height: 300px;
        background: red;
    }
     
    <div id="box4">
        <div class="box4">
     
        </div>
    </div>
     
    5.table-cell实现水平垂直居中: table-cell middle center组合使用
    <div class="table-cell">
        <p>你</p>
    </div>
    1
    /**css**/
    1
    2
    3
    4
    5
    6
    7
    8
    .table-cell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
         240px;
        height: 180px;
        border:1px solid #666;
    }

    6.calc()

  • 相关阅读:
    json数据在前端(javascript)和后端(php)转换
    几个提高效率的PHOTOSHOP秘密快捷键
    移动端ios针对input虚拟键盘挡住的问题
    前端适配移动端的方法
    完美兼容IE10以下所有版本
    vscode vue文件格式化没效果
    官网顶部的标题左移动
    模拟后台一次性返回所有数据
    关于上传图片的问题
    iframe标签在PC端的使用
  • 原文地址:https://www.cnblogs.com/namehou/p/10406670.html
Copyright © 2011-2022 走看看