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

最新推荐文章于 2022-11-03 22:54:50 发布

luozc_web

最新推荐文章于 2022-11-03 22:54:50 发布

阅读量646

点赞数 1

分类专栏： web前端文章标签：未知元素宽高水平垂直

本文链接：https://blog.csdn.net/l505_/article/details/52575597

版权

web前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!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>