zoukankan      html  css  js  c++  java
  • CSS未知宽高元素水平垂直居中

    方法一 
    思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中
    优点:父元素(parent)可以动态的改变高度(table元素的特性)
    缺点:IE8以下不支持

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>未知宽高元素水平垂直居中</title>
    </head>
    <style>
    
    .parent1{
        display: table;
        height:300px;
         300px;
        background-color: #FD0C70;
    }
    .parent1 .child{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: #fff;
        font-size: 16px;
    }
    
    </style>
    <body>
        <div class="parent1">
            <div class="child">hello world-1</div>
        </div>
    </body>
    </html>

    方法二:

    思路:使用一个空标签span设置他的vertical-align基准线为中间,并且让他为inline-block,宽度为0
    缺点:多了一个没用的空标签,display:inline-blockIE 6 7是不支持的(添加上:_zoom1;*display:inline)。
    当然也可以使用伪元素来代替span标签,不过IE支持也不好,但这是后话了

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>未知宽高元素水平垂直居中</title>
    </head>
    <style>
    .parent2{
        height:300px;
        width: 300px;
        text-align: center;
        background: #FD0C70;
    }
    .parent2 span{
        display: inline-block;;
        width: 0;
        height: 100%;
        vertical-align: middle;
        zoom: 1;/*BFC*/
        *display: inline;
    }
    .parent2 .child{
        display: inline-block;
        color: #fff;
        zoom: 1;/*BFC*/
        *display: inline;
    }
    
    </style>
    <body>
        <div class="parent1">
            <div class="child">hello world-1</div>
        </div>
    
        <div class="parent2">
            <span></span>
            <div class="child">hello world-2</div>
        </div>
    </body>
    </html>

    方法三

    思路:子元素绝对定位,距离顶部 50%,左边50%,然后使用css3 transform:translate(-50%; -50%)
    优点:高大上,可以在webkit内核的浏览器中使用
    缺点:不支持IE9以下不支持transform属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>未知宽高元素水平垂直居中</title>
    </head>
    <style>
    .parent3{
        position: relative;
        height:300px;
         300px;
        background: #FD0C70;
    }
    .parent3 .child{
        position: absolute;
        top: 50%;
        left: 50%;
        color: #fff;
        transform: translate(-50%, -50%);
    }
    </style>
    <body>
    <div class="parent3">
            <div class="child">hello world-3</div>
        </div>
    </body>
    </html>
    

    方法四:
    思路:使用css3 flex布局
    优点:简单 快捷
    缺点:兼容不好吧,详情见:http://caniuse.com/#search=flex

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>未知宽高元素水平垂直居中</title>
    </head>
    <style>
    .parent4{
        display: flex;
        justify-content: center;
        align-items: center;
         300px;
        height:300px;
        background: #FD0C70;
    }
    .parent4 .child{
        color:#fff;
    }
    </style>
    <body>div> <div class="parent4">
            <div class="child">hello world-4</div>
        </div>
    </body>
    </html>

     

  • 相关阅读:
    Compression algorithm (deflate)
    tcpip数据包编码解析(chunk and gzip)_space of Jialy_百度空间
    What's the difference between the "gzip" and "deflate" HTTP 1.1 encodings?
    gzip压缩算法: gzip 所使用压缩算法的基本原理
    Decompressing a GZip Stream with Zlib
    Frequently Asked Questions about zlib
    how to decompress gzip stream with zlib
    自己动手写web服务器四(web服务器是如何通过压缩数据,web服务器的gzip模块的实现)
    What's the difference between the "gzip" and "deflate" HTTP 1.1 encodings?
    C语言抓http gzip包并解压 失败 C/C++ ChinaUnix.net
  • 原文地址:https://www.cnblogs.com/jogen/p/5213566.html
Copyright © 2011-2022 走看看