怎么让一个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里面上下居中的主要内容,如果未能解决你的问题,请参考以下文章