zoukankan      html  css  js  c++  java
  • css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法

    1. 给父元素设置table-cell,text-align,vertical-align
    #big{
             200px;
            height: 200px;
            border:1px solid #000;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        #small{
            display: inline-block;
             50px;
            height: 50px;
            background: yellow;
            vertical-align:middle;
        }
    1. 给子元素设置margin:auto
    #big{
             200px;
            height: 200px;
            border:1px solid #000;
            position: relative;
        }
        #small{
            display: inline-block;
             50px;
            height: 50px;
            background: yellow;
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
        }
    1. 弹性盒
    #big{
             200px;
            height: 200px;
            border:1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #small{
            display: inline-block;
             50px;
            height: 50px;
            background: yellow;
        }
    1. 利用translate实现,先进行绝对定位,然后通过translate让它自身往回移动50%
    #big{
             200px;
            height: 200px;
            border:1px solid #000;
            position: relative;
        }
        #small{
            display: inline-block;
             50px;
            height: 50px;
            background: yellow;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
    1. 通过新创建一个元素,设置高为父元素的高,让div以这个元素来执行vertical-align
    #big{
             200px;
            height: 200px;
            border:1px solid #000;
            text-align: center;
        }
        #small{
            display: inline-block;
             50px;
            height: 50px;
            background: yellow;
            vertical-align: middle;
        }
        span{
            display: inline-block;
             0;
            height: 100%;
            background: red;
            vertical-align: middle; 
        }
        </style>
    </head>
    <body>
        <div id="big">
            <div id="small">
            </div>
            <span></span>
        </div>
    </body>
  • 相关阅读:
    激活Maven profile的几种方式
    利用maven的filter和profile实现不同环境使用不同的配制
    通过profile 用maven命令打不同配置的变量包
    使用Maven Profile实现多环境构建
    Window下Nexus私服搭建
    linux之nginx
    linux之命令进阶
    linux之常见命令
    flask中路由的本质源码分析
    vmware+CentOs 6.9的安装步骤
  • 原文地址:https://www.cnblogs.com/twoeggg/p/8051840.html
Copyright © 2011-2022 走看看