CSS水平垂直居中

最新推荐文章于 2022-10-24 19:44:41 发布

理个以哈呦

最新推荐文章于 2022-10-24 19:44:41 发布

阅读量336

点赞数

分类专栏： jQuery css3

jQuery 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

css3

19 篇文章 0 订阅

订阅专栏

使用场景单行内容固定高度 height=line-height，既可以达到垂直居中，水平居中因为div是块级元素，居中需设置text-align: center;

/**适合在所有浏览器，没有足够空间时，内容不会被切掉**/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .c {
        width: 200px;
        height: 50px;
        line-height: 50px;
        color: #fff;
        text-align: center;
        background-color: red;
    }

    </style>
</head>
<body>
    <div class="c">
            单行元素垂直居中
    </div>
</body>
</html>

为需要垂直居中的元素的设置position: absolute;（父级元素是boby），给需要居中的元素的父元素设置相对点position: relative;，在位子元素设置position: absolute；，再将top:50%和left：50%，在通过margin，margin-top为高度的一半（margin-top:-height/2）；margin-left为宽度的一半（margin-left:-width/2）；

/***相对于body进行垂直居中（内容不限制行数）**/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .c {
        position: absolute;
        top:50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -25px;
        width: 200px;
        height: 50px;
        color: #fff;
        text-align: center;
        background-color: red;
    }

    </style>
</head>
<body>
    <div class="c">
            该div相对于body水平垂直居中
    </div>
</body>
</html>
优点：
适合在所有浏览器，没有足够空间时，内容不会被切掉

缺点：
仅适合应用在文本和图片上，并且这种方法，当你文本不是单行时，效果极差，差到让你感到恶心。

这种方法对运用在小元素上是非常有用的，比如说让一个button、图片或者单行文本字段。

/**相对于父元素进行垂直居中（内容不限制行数）**/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .c {
        position: relative;
        width: 200px;
        height: 50px;
        color: #fff;
        text-align: center;
        background-color: red;
    }
    .c span{
        position: absolute;
        width: 180px;
        height: 40px;
        top:50%;
        left: 50%;
        margin-left: -90px;
        margin-top: -20px;
        background-color: yellow;
    }

    </style>
</head>
<body>
    <div class="c">
            父级元素
            <span>该div相对于父级元素水平垂直居中</span>
    </div>
</body>
</html>
优点：
能在各浏览器下工作，结构简单明了，不需增加额外的标签
缺点：
由于固定死元素的高度，致使没有足哆的空间，当内容超过容器的大小时，要么会消息，要么会出现滚动条（如果元素在body内，当用户缩小浏览器窗口时，body的滚动条将不会出现）。

3、使用table渲染完成

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #container {
                height: 300px;
                display: table;
                text-align: center;
                background-color: yellow;
                /*让元素以表格形式渲染*/
            }
            #content {
                display: table-cell;
                /*让元素以表格的单元素格形式渲染*/
                vertical-align: middle;
                /*使用元素的垂直对齐*/
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="content">content</div>
        </div>
    </body>
</html>
优点：
不会被被截断和产生滚动条
缺点：
IE低版本不兼容，可以通过css hack解决。

4、这种方法有点新意，用这种方法你需要在居中元素前面放一个空的

（块元素就可以），然后设置这个

的高度为50%，margin-bottom为元素高度的一半，而且居中元素需要清除浮动。需要注意的是，使用这种方法，如果你的居中元素是放在body中的话，你需要给html,body设置一个“height:100%”的属性。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            html,
            body {
                height: 100%;
            }
            #floater {
                float: left;
                height: 50%;
                /*相对于父元素高度的50%*/
                margin-bottom: -120px;
                /*值大小为居中元素高度的一半（240px/2）*/
            }
            #content {
                clear: both;
                /*清除浮动*/
                height: 240px;
                position: relative;
            }
        </style>
    </head>

    <body>
        <div id="floater">
            <!--This block have empty content -->
        </div>
        <div id="content">Content section</div>
    </body>

</html>
优点：
这种方法能兼容所有浏览器，在没有足哆空间下，内容不会被切掉

缺点：
元素高度被固定死，无法达到内容自适应高度，如果居中元素加上overflow属性，要么元素出现滚动条，要么元素被切掉；另外就是一个不算缺点的缺点，那就是加了一个空标签。

5、jQuery方法

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .container {
                background-color: #338BC7;
                width: 270px;
                height: 150px;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <p>Centered In The Middle Of The Page With jQuery</p>
        </div>
        <script src="jquery-1.9.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $(window).resize(function() {
                    $('.container').css({
                        position: 'absolute',
                        left: ($(window).width() - $('.container').outerWidth()) / 2,
                        top: ($(window).height() - $('.container').outerHeight()) / 2
                    });
                });
                // 最初运行函数
                $(window).resize();
            });
        </script>
    </body>

</html>
/**需要引入jQuery文件**/

/**相对定位和绝对定位**/
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .parent-div {
                width: 100px;
                height: 100px;
                background-color: red;
                position: relative;
                margin: 100px auto;
            }
            .child-div {
                width: 50px;
                height: 50px;
                background-color: #000;
                position: absolute;
                margin: auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>

    <body>
        <div class="parent-div">
            <div class="child-div"></div>
        </div>
    </body>

</html>