zoukankan      html  css  js  c++  java
  • 用CSS让未知高度内容垂直方向居中

    方案一:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Demo</title>
        <style type="text/css">
            #outer{
                width:500px;
                height:200px;
                margin: 50px auto;
                border:1px solid #CCC;
                display:table;
                text-align:center;
                #position:relative;
            }
            #middle{
                display:table-cell;
                vertical-align:middle;
                #position:absolute;
                #top:50%;
                #left:50%;
            }
            #inner{
                #position:relative;
                #top:-50%;
                #left:-50%;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="middle">
                <img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>
            </div>
        </div>
    </body>
    </html>

      方案二:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Demo</title>
        <style type="text/css">
            #outer{
                width:500px;
                height:200px;
                margin: 50px auto;
                border:1px solid #CCC;
                position:relative;
            }
            #inner{
                position:relative;
                left:50%;
                top:50%;
                margin-left:-71px;
                margin-top:-27px;
            }
        </style>
    </head>
    <body>
        <div id="outer">
                <img id="inner" src="http://static.cnblogs.com/images/logo_small.gif"/>
        </div>
    </body>
    </html>

      方案一主要原理是标准浏览器下用table和table-cell布局,然后用vertical-align:middle居中元素,但IE67不支持table布局,所以用了用了css hake,就是带#开头的属性。

      方案二用负margin实现,但缺点是要知道居中内容的宽度和高度。

  • 相关阅读:
    将博客搬至CSDN
    NOIP2018酱油记
    CF 1039D You Are Given a Tree && CF1059E Split the Tree 的贪心解法
    最大异或子序列问题
    UVa 10615
    UVa 1057
    用树状数组代替平衡树
    [CTSC2008]图腾totem
    POI2008 题解
    简便思路的题目别人的做法
  • 原文地址:https://www.cnblogs.com/jscode/p/2698809.html
Copyright © 2011-2022 走看看