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

    方法-1 

    img { vertical-align: middle; }
    div:before { content: "";
    display: inline-block;
    0; height: 100%;
    vertical-align: middle;

    方法0 

    .item{
      position:absolute
      top:50%
      left:50%
      transform:translate3D:(-50%,-50%,0)
    }

    方法1:水平:margin:0 auto;

      垂直:使用定位属性,小的div在大的div中分别绝对定位为:left:50%;top:50%,然后再添加margin-left op属性,值为负的小div的宽高的一半

                .parent {
                    width: 500px;
                    height: 500px;
                    border: 1px solid red;
                    position: relative;
                    
                }
                
                .child{
                    width: 100px;
                    height: 100px;
                    border: 1px solid darkgreen;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    margin-left: -50px;
                    margin-top: -50px;
                }

    方法2:table cell:

                .parent {
                    width: 500px;
                    height: 500px;
                    border: 1px solid red;
                    display: table-cell;
                    vertical-align: middle;
                }
                
                .chlid{
                    width: 100px;
                    height: 100px;
                    border: 1px solid darkgreen;
                    margin: 0 auto;
                }

     3.clientWidth:可视区域宽度;offsetWidth:元素宽度,scrollWidth:页面总宽。

     4.行级元素可通过line-height垂直居中

    5 移动端css3:

    .parent{
      display:-webkit-box;     //显示成盒子模式
    -webkit-box-align:center;   //垂直居中  
    }

     6 flex布局

    .box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  • 相关阅读:
    33. 搜索旋转排序数组
    54. 螺旋矩阵
    46. 全排列
    120. 三角形最小路径和
    338. 比特位计数
    746. 使用最小花费爬楼梯
    spring boot的一些常用注解
    SSM整合Dubbo案例
    一些面试题
    Spring Aop和Spring Ioc(二)
  • 原文地址:https://www.cnblogs.com/rlann/p/7016925.html
Copyright © 2011-2022 走看看