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>
  • 相关阅读:
    Use MVS Dsbame convensions. windows下ftp.exe客户端上传错误
    Sqlserver 2005:数据库快照
    Oracle:使用ASM自动存储管理, 严重推荐
    Thunderbird 邮件客户端:windows 和 ubuntu 或 liunx 下共用的方法
    Oracle:Oracle 10 RAC 安装群集件的准备工作
    SSH
    STL
    ASP生成静态Html文件技术杂谈
    Nessus:网络和主机漏洞评估程序安装试用
    table 的 id 属性不被 document.getElementById支持
  • 原文地址:https://www.cnblogs.com/change-oneself/p/5434946.html
Copyright © 2011-2022 走看看