• 【CSS】div 盒子居中的常用方法

    <body>
    <div class="main">
        <div class="box">div>
    div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    1. 绝对定位加 margin: auto; ：
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    1. 绝对定位加负 margin：
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    1. margin 推动：
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    1. flex 居中（弹性盒）：
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    1. transform：
    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    1. 子盒子宽高不确定（需要保证left和right的百分数一样，top和bottom的百分数一样）：
    <style>
    * {
        padding: 0;
        margin: 0;
    }
    .main {
        width: 400px;
        height: 400px;
        border: 2px solid #000;
        margin: 30px auto;
        position: relative;
    }
    .box {
        background-color: #f00;
        position: absolute;
        left: 25%;
        top: 25%;
        right: 25%;
        bottom: 25%;
    }
style>

<body>
    <div class="main">
        <div class="box">div>
    div>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在这里插入图片描述

  • 相关阅读:
    【PyTorch】nn.Conv2d函数详解
    《FORTRAN语法：章节篇》第1章 数据类型
    代码随想录二刷 ｜ 链表 ｜ 删除链表的倒数第N个节点
    redis实现分布式锁的原理
    【数据结构】队列
    【Python自动化】Python-docx基础入门--插入table表格样式设置
    Spring注解驱动笔记【更新ing】
    【极客时间-系列教程】深入剖析Kubernetes-预习篇 · 小鲸鱼大事记（二）：崭露头角
    kafka安装配置
    YOLOv5分类任务——手势识别
  • 原文地址：https://blog.csdn.net/XiugongHao/article/details/134223991