zoukankan      html  css  js  c++  java
  • 绝对定位下的水平水平和垂直居中

    CSS绝对定位下的水平居中原理:

    1,先设置div绝对定位的左侧位偏移为整个网页body的一半也就是50%

    2,再设置div左侧边距margin-left为这个div自身宽度的一半

    如:

     
      .box3 {
             150px;
            height: 26px;
            position: absolute;
            /* 以下2个left和margin-left可以实现绝对定位时的水平居中 */
            left: 50%;
            margin-left: -75px;
        }








    CSS绝对定位下的垂直居中原理:

    1,先设置div绝对定位的左侧位偏移为整个网页body的一半也就是50%

    2,再设置div顶部边距margin-top为这个div自身高度的一半

    如:

      .box3 {
             150px;
            height: 26px;
            background: rgb(0, 0, 0, 0.3);
            position: absolute;
            /* 以下2个left和margin-left可以实现绝对定位时的水平居中 */
            top: 50%;
            margin-top: -13px;
            bottom: 10px;
            border-radius: 13px;
        }
  • 相关阅读:
    java位运算
    java笔试题(面试题)系列之一
    Java数据类型转换总结
    ++a和a++
    Java IO
    Java 并发
    Java位运算及补码存储
    Redis 5.0.0安装部署(伪集群版)
    Redis 安装(单机版)
    Dubbo源码分析系列之【服务暴露】
  • 原文地址:https://www.cnblogs.com/JeffreyZhu/p/15151552.html
Copyright © 2011-2022 走看看