常用居中

最新推荐文章于 2022-08-01 12:56:44 发布

lhh_12345

最新推荐文章于 2022-08-01 12:56:44 发布

阅读量227

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lhh_12345/article/details/77649509

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、使用绝对定位进行居中（已知元素宽高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fade</title>
    <style>
    .out{
        position:relative;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
    }
    .in{
        position: absolute;
        width: 100px;
        height: 100px;
        margin:auto;
        top:0;
        left:0;
        right:0;
        bottom: 0;
        background-color: pink;
    }
    </style>
</head>
<body>
        <div class="out">
            <div class="in">测试内容</div>    
        </div>
</body>
</html>

2、另一种绝对定位进行居中（已知元素宽高）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fade</title>
    <style>
    .out{
        position:relative;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
    }
    .in{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        margin-left: -50px;
        margin-top: -50px;
        background-color: pink;
    }
    </style>
</head>
<body>
        <div class="out">
            <div class="in">测试内容</div>    
        </div>    
</body>
</html>

3、浮动元素的水平居中（不需要知道元素宽度高度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fade</title>
    <style>
    .box{
        width:200px;
        height: 200px;
        background-color: red; 

    }
    .out{
        float:left;  
        position:relative;
        top: 50%;
        left: 50%;
        background-color: lightgreen;
    }
    .in{
        position: relative;
        top: -50%;
        left: -50%;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="out">
            <div class="in">测试内容</div>    
        </div>    
    </div>
</body>
</html>

lhh_12345

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用居中

1、使用绝对定位进行居中（已知元素宽高） fade .out{ position:relative; width: 200px; height: 200px; background-color: lightgreen; } .in{ position: abs
复制链接

扫一扫

专栏目录