未知元素宽高水平垂直居中

来源：互联网发布：ssr centos 编辑：程序博客网时间：2024/05/20 04:14
<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>未知宽度高度的水平垂直居中(4种)</title>        <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>        <style type="text/css">            /*未知宽度高度的水平垂直居中(一)：             * 如果放在body中，则需要给html,body设置一个“height:100%”的属性。             * display:table;             * display:table-cell;             * vertical-align: middle;             * */            h1{font-weight: normal;}            body{                margin: 0;                padding: 0;            }            .section{                width: 100%;                height: 500px;                margin: 0 auto;                position: relative;                text-align: center;            }            .section-1{                background: #666;            }            .table{                width: 100%;                height: 100%;                display: table;/*定义成表结构*/                position: relative;                background: #666;            }            .tablecell{                display: table-cell;                text-align: center;                vertical-align: middle;            }            .content{                font-size: 30px;                line-height: 1.5;            }            /*未知宽度高度的水平垂直居中(二)：             * 采用的position: absolute，然后用translate移动位置。translate的比例针对的是元素本身的宽高             * */            .section-2{                background: #333;                color: #fff;            }            .section-2 .middle{                position: absolute;                left: 50%;                top: 50%;                transform: translate(-50%,-50%);                -ms-transform: translate(-50%,-50%);                -moz-transform: translate(-50%,-50%);                -webkit-transform: translate(-50%,-50%);            }            /*未知宽度高度的水平垂直居中(三)：             * 采用的display:inline-block，然后借助另一个元素的高度来实现居中             * */            .section-3 {                /*定义高度，让线盒型div#extra有一个参照物，可以是固定值，也可以是百分比*/                background: #999;            }            #vertically_center,#extra {                display: inline-block;/*把元素转为行内块显示*/                vertical-align: middle;/*垂直居中*/                text-align: center;            }            #extra {                height: 100%; /*设置线盒型为父元素的100%高度*/            }            /*未知宽度高度的水平垂直居中(四)：             * 通过js获取计算宽高             * */            .section-4{                background: #000;                color: #fff;            }        </style>    </head>    <body>        <!-- method-1 -->        <div class="section section-1">            <div class="table">                <div class="tablecell">                    <h1>未知宽度高度的水平垂直居中(一)</h1>                    <p class="content">                        更多功能敬请关注APP更新                    </p>                </div>            </div>        </div>        <!-- method-2 -->        <div class="section section-2">            <div class="middle">                <h1>未知宽度高度的水平垂直居中(二)</h1>                <p>                    目前太阳模式仅用于体验<br />                    更多功能敬请关注APP更新                </p>            </div>            <div id="extra"></div>        </div>        <!-- method-3 -->        <div class="section section-3">            <div class="wrap">                <p class="content">                    未知宽度高度的水平垂直居中(四)<br />                    目前太阳模式仅用于体验<br />                    更多功能敬请关注APP更新                </p>            </div>        </div>        <!-- method-4 -->        <div class="section section-4">            <div class="wrap">                <p class="content">                    未知宽度高度的水平垂直居中(四)<br />                    目前太阳模式仅用于体验<br />                    更多功能敬请关注APP更新                </p>            </div>        </div>        <script type="text/javascript">            (function($){                $.fn.vhAlign =  function(){                    return this.each(function(i){                      //获取元素的内容高度                        var h = Math.ceil($(this).height());                        //outerHeight=padding+border+height                        var oh = Math.ceil($(this).outerHeight());                        //取得margin-top值                        var mt = Math.ceil(oh / 2);                        //取得元素宽度                        var w = Math.ceil($(this).width());                        //outerWidth=padding+border+width                        var ow = Math.ceil($(this).outerWidth());                        //取得margin-left                        var ml = Math.ceil(ow / 2);                        //实现元素居中效果                        $(this).css({                            "margin-top": "-" + mt + "px",                            "top": "50%",                            "margin-left": "-" + ml + "px",                            "left": "50%",                            "width":w,                            "height":h,                            "position": "absolute"                        });                     });                };            })(jQuery);        </script>        <script type="text/javascript">            $(document).ready(function(){                $(".wrap").vhAlign();            });        </script>    </body></html>
1 0