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

    方案1:position 元素已知宽度 
    父元素设置为:position: relative; 
    子元素设置为:position: absolute; 
    距上50%,据左50%,然后减去元素自身宽度的距离就可以实现 

    事例1:

    <div class="box">
    <div class="content">
    </div>
    </div>

    .box {
    background-color: #FF8C00;
    300px;
    height: 300px;
    position: relative;
    }
    .content {
    background-color: #F00;
    100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    }

    方案2:

    position transform 元素未知宽度 

    如果元素未知宽度,只需将上面例子中的margin: -50px 0 0 -50px;替换为:transform: translate(-50%,-50%); 
    效果如上! 

    示例2:

    <div class="box">
    <div class="content">
    </div>
    </div>

    .box {
    background-color: #FF8C00;
    300px;
    height: 300px;
    position: relative;
    }
    .content {
    background-color: #F00;
    100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    }

    方案3:flex布局 

    示例3:

    <div class="box">
    <div class="content">
    </div>
    </div>

    .box {
    background-color: #FF8C00;
    300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
    }
    .content {
    background-color: #F00;
    100px;
    height: 100px;
    }

  • 相关阅读:
    vue+vant打包,vue+vant-ui小程序,微信支付
    vue+vant-ui移动端适配 宽高
    web前端面试题
    vue面试题及答案(1)
    vue的增删改查(简单版)
    Vue computed计算属性
    vue.cli的安装配置
    Create React App 安装时出现的错误解决方法
    运行node文件的多种方式
    怎么把node配置成全局打开
  • 原文地址:https://www.cnblogs.com/zhx119/p/9911105.html
Copyright © 2011-2022 走看看