使用CSS实现上下左右居中

最新推荐文章于 2024-07-03 09:48:27 发布

IvyYin

最新推荐文章于 2024-07-03 09:48:27 发布

阅读量7.3k

点赞数

分类专栏： HTML/CSS/JS 文章标签： css

本文链接：https://blog.csdn.net/sinat_20177327/article/details/76096166

版权

HTML/CSS/JS 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1、左右居中

使用纯CSS实现左右居中的经典方法是将被居中元素的margin值左右设置为auto，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>左右居中</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .parent{
            width: 80%;
            height: 400px;/*固定高度只为结果直观，高度可自动*/
            margin: 0 auto;/*父元素相对于浏览器窗口左右居中*/
            background: #DEC2C2;
        }
        .child{
            width: 200px;
            height: 400px;
            margin: 0 auto;/*子元素相对于父元素左右居中*/
            background: #65AC6B;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            左右居中
        </div>
    </div>
</body>
</html>

结果如图：

这里写图片描述

2、上下左右居中

（1）被居中元素宽高已知

只要使得父元素相对定位，子元素绝对定位，子元素的top和left都为50%，margin-top和margin-left分别为宽高的负一半即可。

<!--上下左右居中-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DIV上下左右居中</title>
    <style type="text/css">
            *{/*实现div的上下左右居中*/
                margin: 0;
                padding: 0;
            }/*清除格式*/
            .div0{
                height: 1000px;
                width: 800px;
                position: relative;/*父元素相对定位*/
                background: #678680;
            }
            .div1{
                position: absolute;/*子元素绝对定位*/
                height: 240px;
                width: 300px;
                /*overflow: hidden;*//*可使得多出块元素的文本隐藏*/
                top: 50%;
                left: 50%;
                margin-top: -120px;/*高的一半*/
                margin-left: -150px;/*宽的一半*/
                border: 5px solid #E58B8B;
                text-align: center;
            }
            .div1 p{
                font-size: 36px;
            }
    </style>
</head>
<body>
    <div class="div0">
        <div class="div1">
            <p>hello world!</p>
            <p>hello world!</p>
        </div>
    </div>
</body>
</html>

（2）被居中元素宽高未知

<!--上下左右居中-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上下左右居中</title>
    <style type="text/css">
            *{/*实现div的上下左右居中*/
                margin: 0;
                padding: 0;
            }/*清除格式*/
            .div0{
                height: 500px;
                width: 500px;
                position: relative;/*父元素相对定位*/
                background: #678680;
            }
            .div1{/*被居中元素宽高未知*/
                position: absolute;/*子元素绝对定位*/
                top: 100px;
                bottom: 100px;
                left: 200px;
                right: 200px;/*设置上下左右撑开以居中*/
                background: #E3A5A5;
                text-align: center;
            }
    </style>
</head>
<body>
    <div class="div0">
        <div class="div1">
        </div>
    </div>
</body>
</html>