zoukankan      html  css  js  c++  java
  • css 垂直居中的几种方式

    元素示例

    <template>
        <div class="margin"
             style=" 500px;
                    height: 500px;
                    background-color: yellow">
            <div class="center"
                 style=" 200px;
                        height: 200px;
                        background-color: red">
            </div>
        </div>
    </template>

     

    Part.1  绝对定位 + 百分比

    .margin {
        position: relative;
    }
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }

     

    Part.2  绝对定位 + transform

    .margin {
        position: relative
    }
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

     

    Part.3  绝对定位 + 0

    .margin {
        position: relative
    }
    .center {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto
    }

    Part.4  flex

    .margin {
        display: flex;
        justify-content: center;
        align-items: center;
    }

     

    Part.5  flex + margin

    .margin {
        display: flex
    }
    .center {
        margin: auto
    }
  • 相关阅读:
    Junit单元测试
    点餐系统
    文件的横纵转换
    零碎知识--日积月累
    json校验
    程序员必须收藏的14个顶级开发社区!
    管理员权限
    Thinking In Java 读书笔记
    学生考试系统
    JeeSite开发笔记
  • 原文地址:https://www.cnblogs.com/langxiyu/p/11177487.html
Copyright © 2011-2022 走看看