zoukankan      html  css  js  c++  java
  • CSS垂直居中

    1.单行内容居中

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Test</title>
    	<style type="text/css">
    	#wrapper{
    		background: #ddd;
    		height: 40px;
    		line-height: 40px;
    		 200px;
    		text-align: center;
    	}
    	</style>
    </head>
    <body>
    <div id="wrapper">
    	<span>span</span>
    </div>
    </body>
    </html>

    主要是height和line-height高度一致

    2.让未知内容高度的元素居中

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Demo</title>
        <style type="text/css">
            #outer{
                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>

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

    3.让已知内容高度的元素居中

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>Demo</title>
        <style type="text/css">
            #outer{
                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>
    

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

    转自: http://www.cnblogs.com/jscode/archive/2012/09/23/2698809.html

  • 相关阅读:
    MYSQL关于数据库的操作命令
    理解js中的原型和原型链
    float引起的高度塌陷问题
    使用webpack2.0 搭建前端项目
    jquery插件开发总结
    js中的OOP编程
    关于gulp的基本使用
    关于requireJs的学习总结
    vuex的学习总结
    事件中的target与currentTarget的区别
  • 原文地址:https://www.cnblogs.com/erduyang/p/4925158.html
Copyright © 2011-2022 走看看