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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎么让一个div在一个div里面上下居中相关的知识,希望对你有一定的参考价值。

参考技术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;
      }

以上是关于怎么让一个div在一个div里面上下居中的主要内容,如果未能解决你的问题,请参考以下文章

在HTML中怎么让div里的东西上下居中

css怎么让一个div居中另一个div里面,小的大小确定,大的是屏幕的百分比

如何实现div的上下左右都居中?

如何实现div的上下左右都居中?

css 里面怎么让一个DIV居中 ?

怎么让div中的div上下居中