zoukankan      html  css  js  c++  java
  • position fixed 居中

    1、水平居中
    .footer {
    height: 10%;
    text-align: center;
    position: relative;
    left: 50%;
    transform: translate(-50%, -50%); /*水平居中*/
    top: 30px;
    }

    2、垂直居中:
    .footer {
    height: 10%;
    text-align: center;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%); /*水平居中*/
    left: 30px;
    }
    3、万能居中法:

    #name{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:1000;
    }

    、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

    通常情况下,我们通过操作margin来控制元素居中,代码如下:

    1 #name{
    2     maigin:0px auto;
    3 }

    但当我们把position设置为fixed时,例如:

    1 #id{
    2     position:fixed;
    3     margin:0px auto;
    4 }

    以上代码中的margin:0px auto;会出现失效问题,盒子并未居中。这是因为fixed会导致盒子脱离正常文档流。
    解决方法非常简单,只要应用如下代码即可:

    复制代码
    1 #name{
    2     position:fixed;
    3     margin:0px auto;
    4     right:0px;
    5     left:0px;
    6 }
    复制代码

    若希望上下也可以居中,可采用如下代码:

    复制代码
    1 #name{
    2     position:fixed;
    3     margin:auto;
    4     left:0;
    5     right:0;
    6     top:0;
    7     bottom:0;
    8 }
    复制代码

    万能居中法(未知大小呦):

    复制代码
    1 #name{
    2       position:fixed;
    3       left:50%;
    4       top:50%;
    5       transform:translate(-50%,-50%);
    6       z-index:1000;      
    7 }
    复制代码



  • 相关阅读:
    员工看公司
    Java多线程
    Intellij热部署插件JRebel的详细配置及图解
    Java并发处理锁 Lock
    Java8 Stream
    Eclipse下Maven安装和配置
    IntelliJ IDEA 部署Tomcat及创建一个web工程
    IntelliJ IDEA 下搭建vue项目工程
    Vue Router路由管理器介绍
    用WebStorm搭建vue项目
  • 原文地址:https://www.cnblogs.com/YuyuanNo1/p/9877251.html
Copyright © 2011-2022 走看看