块级元素水平垂直居中

最新推荐文章于 2022-07-18 09:34:07 发布

嗯嗯**

最新推荐文章于 2022-07-18 09:34:07 发布

阅读量259

点赞数

分类专栏：前端知识文章标签：元素居中块级元素子绝父相 calc margin

本文链接：https://blog.csdn.net/weixin_39651356/article/details/102394672

版权

前端知识专栏收录该内容

25 篇文章 0 订阅

订阅专栏

文章目录

重点知识：

left、right、top、bottom：百分比 → 以父元素的宽高为标准
calc(百分比表达式)：该属性是以什么为标准则以什么为标准
translateX/Y(百分比)：以当前元素的宽高为标准
vertical-align: middle → 当前元素的中心点对齐父元素文字的中部(即行高一半)

1. 子块级宽高度固定

1.1 设置：left=right=top=bottom=0

<head>

    <style>
        .a {
            width: 500px;
            height: 500px;
            background: red;
            position: relative;
        }
        
        .b {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto auto;      
        }
        
    <style>

</head>

<body>
    <div class="a">
        <div class="b">
        <div>
    </div>
</body>

1.2 设置left、top居中，margin调整

<head>

    <style>
        .a {
            width: 500px;
            height: 500px;
            background: red;
            position: relative;
        }
        
        .b {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;      
            margin-top: -100px;
        }
        
    <style>

</head>

<body>
    <div class="a">
        <div class="b">
        <div>
    </div>
</body>

1.3 使用CSS函数calc() → 计算居中值

<head>
    <style>
        .a {
            width: 500px;
            height: 500px;
            background: red;
            position: relative;
        }
        
        .b {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: calc( 50% - 100px );
            top: calc( 50% - 100px );
        }
        
    <style>
</head>

<body>
    <div class="a">
        <div class="b">
        <div>
    </div>
</body>

1.4 设置：left、top居中，transfrom水平垂直平移

<head>
    <style>
        .a {
            width: 500px;
            height: 500px;
            background: red;
            position: relative;
        }
        
        .b {
            width: 200px;
            height: 200px;
            background: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transfrom: translateX(-50%) translateY(-50%);
        }
        
    <style>
</head>

<body>
    <div class="a">
        <div class="b">
        <div>
    </div>
</body>

2. 子元素宽度、高度不固定

2.0 切记别使用1.1方法：导致子元素的宽高继承父元素

2.1 使用上述1.4的方法

2.2 父设: line-height、子设：vertical-align、行内块

<head>
    <style>
        .a {
            width: 500px;
            height: 500px;
            line-height: 500px;
            text-align: center;
            border: 1px solid black;
        }
        
        .b {
            width: 200px;
            height: 200px;
            background: green;
            display: inline-block;
            vertical-align: middle;
        }
        
    <style>
</head>

<body>
    <div class="a">
        <div class="b">
            <span>各位观众们好！</span>
        <div>
    </div>
</body>

嗯嗯**

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
块级元素水平垂直居中

文章目录1. 子块级宽高度固定1.1 设置：left=right=top=bottom=01.2 设置left、top居中，margin调整1.3 使用CSS函数calc() → 计算居中值1.4 设置：left、top居中，transfrom水平垂直平移2. 子元素宽度、高度不固定2.0 切记别使用1.1方法：导致子元素的宽高继承父元素2.1 使用上述1.4的方法2.2 父设: line-hei...
复制链接

扫一扫

专栏目录