zoukankan      html  css  js  c++  java
  • 简单方便的div垂直居中。

    此处讨论的是,在一个父容器中只有一个DIV,这个DIV相对于父元素垂直居中的问题:

    以下列举三种方式:这里为了层次清晰,都是采用的sass写法。

    一:适用于子元素有具体的宽高

    .wrap{

    //父元素可以不定义任何属性

    .content{

    position:absolute;

    height:100px;

    top:50%;

    margin-top:-50px;//自身高度的一半}}

    二:适用于子元素和父元素都没有具体的宽高

    .wrap{

    display:table;//父元素必须要有的样式属性

    .content-wrap{

    display:table-cell;

    vertical-align:middle;

    //子元素必须有的样式,其实是借用table布局。

    .content{

    //不需要定义任何样式,就会再content-wrap里面居中

    }}}

    三:适用于子元素有固定的高宽

    .wrap{

    position:relative;

    .content{

    position:absolute;:

    200px;

    height:200px;

    top:0;

    bottom:0;

    margin:auto;}

    }

  • 相关阅读:
    vue父子组件传值的方式
    定时任务写法
    仅仅为笔记
    consul剔除某个服务
    mybatis批量查询
    一次eureka的事故
    feign的工作原理
    JVM优化
    threadlocal应用
    秋招总结
  • 原文地址:https://www.cnblogs.com/lihongfei0602/p/4242691.html
Copyright © 2011-2022 走看看