怎么让一个div在一个div里面上下居中

Posted 2023-04-21

参考技术A

正常情况下，且这个div里面只有一个div，那么这种情况又分为两种情况，一种是是否是自适应，如果是自适应需要使用js来控制。如果都是固定宽度和高度，那么这个通过css可以直接控制。


里面的div使用absolute来进行定位，那么外层设置relative。实例代码：

.fawidth:400px;height:100px;

.sonposition:absolute,top:50%;left:50%;width:100px;height:100px;margin:-50px 0px 0px -50px


<div class="fat">

  <div class="son"></div>


</div>

这个就是居中样式，如果里面div是自适应的那么就使用js获取里面的div的宽度和高度，然后将margin-top:负的二分之一div高度，margin-left:负的二分之一高度。

情况有很多，给你是一个大体的思路，希望你懂

本回答被提问者采纳

转：div+css 怎么让一个小div在另一个大div里面 垂直居中

方法1：绝对定位+margin:auto

.parent {
          width:800px;
          height:500px;
          border:2px solid #000;
          position:relative;
}
 .child {
            width:200px;
            height:200px;
            margin: auto;  
            position: absolute;  
            top: 0; left: 0; bottom: 0; right: 0; 
            background-color: red;
}

方法2：display:table-cell

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:table-cell;
            vertical-align:middle;
            text-align: center;
        }
        .child {
            width:200px;
            height:200px;
            display:inline-block;
            background-color: red;
        }

方法3：display:flex

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .child {
            width:200px;
            height:200px;
            background-color: red;
        }

方法4：绝对定位+margin

.parent {
            width:800px;
            height:500px;
            border:2px solid #000;
            position:relative;
        }
        .child {
            width:300px;
            height:200px;
            margin:auto;
            position:absolute;/*设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小*/
　　　　　　　　left:50%;
　　　　　　　　top:50%;
　　　　　　　　　margin-left: -150px;
  　　　　　　　　margin-top: -100px;
　　　　　　　　　　background-color: red;
　　　　　　}