zoukankan      html  css  js  c++  java
  • css盒子垂直居中

    首先父盒子包住子盒子

    <body>
    <div class="outbox">
        <div class="box"></div>
    </div>
    </body>

    方法一:设置距父盒子的margin-top/margin-left为父盒子宽度或长度-子盒子宽度或长度一半

    <style>
            *{
                padding: 0;
                margin: 0;
            }
            .outbox{
                width:100px;
                height: 100px;
                background: chartreuse;
                border: 1px solid black;
                margin: auto;
            }
            .box{
                width: 50px;
                height: 50px;
                background: red;
                margin-top: 25px;
                margin-left: 25px;
            }
     </style>

    方法二:绝对定位距左距上50%  margin-top和margin-left 各为负的宽高一半拉回来

    <style>
            *{
                padding: 0;
                margin: 0;
            }
            .outbox{
                width:100px;
                height: 100px;
                background: chartreuse;
                border: 1px solid black;
                margin: auto;
                position: relative;
            }
            .box{
                width: 50px;
                height: 50px;
                background: red;
                position: absolute;
                left:50%;
                top:50%;
                margin-left: -25px;
                margin-top: -25px;
            }
        </style>

    方法三:magin:auto  absolute然后距离左右上下都为0

     <style>
            *{
                padding: 0;
                margin: 0;
            }
            .outbox{
                width:100px;
                height: 100px;
                background: chartreuse;
                border: 1px solid black;
                margin: auto;
                position: relative;
            }
            .box{
                width: 50px;
                height: 50px;
                background: red;
                position: absolute;
                margin: auto;
                top:0;
                left:0;
                bottom:0;
                right:0
            }
        </style>

    方法四:利用table-cell(注意:只能用于ie8及其以上)属性 将父元素表格形式呈现 vertical-align显示为上下居中middle

     <style>
            *{
                padding: 0;
                margin: 0;
            }
            .outbox{
                width:100px;
                height: 100px;
                background: chartreuse;
                border: 1px solid black;
                margin: auto;
                display: table-cell;
                vertical-align: middle;
            }
            .box{
                width: 50px;
                height: 50px;
                background: red;
                margin: auto;
            }
        </style>

     方法五:弹性布局居中 align-item:center垂直居中  justify-content:水平居中

     <style>
            *{
                padding: 0;
                margin: 0;
            }
            .outbox{
                width:100px;
                height: 100px;
                background: chartreuse;
                border: 1px solid black;
                margin: auto;
                display:flex;
                align-items: center;
                justify-content: center;
            }
            .box{
                width: 50px;
                height: 50px;
                background: red;
            }
        </style>

     绝对定位的方式fixed可以如法炮制;当然我认为也可以用display:inline-block

  • 相关阅读:
    常用的16个Java实用工具类,Java开发人员请收藏!
    JVM内存区域与垃圾回收
    听说你还不知道Java代码是怎么运行的?
    Java 到底是值传递还是引用传递?
    Java线程池实现原理及其在美团业务中的实践
    别再说Java对象都是在堆内存上分配空间的了!
    面试常问的Java虚拟机内存模型,看这篇就够了!
    好用的Java工具类库,GitHub星标10k+你在用吗?
    MySQL 全文索引实现一个简单版搜索引擎
    laravel 数据库里的图片重命名
  • 原文地址:https://www.cnblogs.com/douyaer/p/8207271.html
Copyright © 2011-2022 走看看