zoukankan      html  css  js  c++  java
  • 一些垂直居中方法

    1、利用伪类实现垂直居中(居中元素大小可未知)

    <style>
        .main{300px;height:300px;border:1px solid;}
        .center{100px;height:100px;border: 1px solid;display: inline-block;vertical-align: middle;}
        .main:after{display:inline-block; 0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}
    </style>
    </head>
    <body>
        <div class="main">
            <div class="center"></div>
        </div>
    </body>

    要点:居中元素需要是 display:inline-block;属性的元素。

    2、利用transform:translate(),实现垂直居中(居中元素大小可未知)

    <style>
        .main{300px;height:300px;border:1px solid;}
        .center{100px;height:100px;border: 1px solid;}
        .center{position:relative;transform: translateY(-50%);top:50%;}
    </style>
    </head>
    <body>
        <div class="main">
            <div class="center"></div>
        </div>
    </body>

    原理:居中元素需要是定位,通过负自身的50%来实现居中。

    3、利用flex实现垂直居中(居中元素大小可未知)

    <style>
        .main{300px;height:300px;border:1px solid;}
        .center{100px;height:100px;border: 1px solid;}
        .main{display: -webkit-box;display: -ms-flexbox;-webkit-display:flex;display: flex;align-items: center;-webkit-align-items:center;}
    </style>
    </head>
    <body>
        <div class="main">
            <div class="center"></div>
        </div>
    </body>

    要点:align-items:center; (适用于父盒子上,用于设置垂直对齐方式)

    4、position方法实现居中(居中元素大小可未知)

    <style>
        .main{300px;height:300px;border:1px solid;position:relative;}
        .center{100px;height:100px;border: 1px solid;}
        .center{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
    </style>
    </head>
    <body>
        <div class="main">
            <div class="center"></div>
        </div>
    </body>

    要点:top和bottom都要设为0;

    5、常用方法position(居中元素大小需已知)

    <style>
        .main{300px;height:300px;border:1px solid;}
        .center{100px;height:100px;border: 1px solid;}
        .center{position:relative;top:50%;margin-top:-50px;}
    </style>
    </head>
    <body>
        <div class="main">
            <div class="center"></div>
        </div>
    </body>

    要点:position以后,margin-top负50%盒子都高度;

    6、table-cell

    <style>
        .main{300px;height:300px;border:1px solid;}
        .center{100px;height:100px;border: 1px solid;display: table;}
        .main{display: table-cell;vertical-align: middle;}
    </style>
    </head>
    <body>
        <div class="main">
            <div class="center"></div>
        </div>
    </body>
  • 相关阅读:
    JAVA基础-多态
    JAVA基础-- 对象转型 (casting)
    Flutter: 下拉刷新,上拉加载更多
    Flutter 创建dashboard页面
    Android Studio 3.3.1 向avd模拟器发送本地文件
    Flutter 真机调试
    android adb命令,向开发手机添加文件
    获取用户在web页面上选中的文本
    Cheat Engine 6.8 设置中文
    Flutter 编写内联文本
  • 原文地址:https://www.cnblogs.com/change-oneself/p/5434946.html
Copyright © 2011-2022 走看看