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>
  • 相关阅读:
    Cocos2dx 3.0 交流篇
    android获取ip和本机的物理地址
    半平面交总结and模板
    页面跳转的三种方式
    83. 从视图索引说Notes数据库(上)
    IE7IE8兼容性设置_服务器端设定
    [置顶] 王志成30岁前自传-我曾创造过的“第一”
    Android CTS 结果 testResult.xml 修改 fail 项 为 notExecuted 项 分析
    java android面试题分析总结
    android之写文件到sd卡
  • 原文地址:https://www.cnblogs.com/change-oneself/p/5434946.html
Copyright © 2011-2022 走看看