CSS一个盒子在另一个盒子水平垂直居中

Posted 2023-04-18

参考技术A 链接：https://zhuanlan.zhihu.com/p/39437057

第一种：利用负的margin来进行居中，需要知道固定宽高，限制比较大。

body>div:nth-of-type(1) width:400px; height:400px; background:#ff0; position:relative; margin-bottom:10px;

body>div:nth-of-type(1)div width:100px; height:100px; background:#0f0; position:absolute; top:50%; left:50%; margin-left:-50px; margin-top:-50px;

第二种：利用绝对定位居中，非常常用的一种方法。body>div:nth-of-type(2) width:400px; height:400px; background:#ff0; position:relative; margin-bottom:10px;

body>div:nth-of-type(2) div width:100px; height:100px; background:#0f0; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;

第三种：使用flex布局（.min宽高可不固定）

body>div:nth-of-type(3) width:400px; height:400px; background:#ff0; margin-bottom:10px; display:flex;

body>div:nth-of-type(3) div width:100px; height:100px; background:#0f0; margin:auto

第四种：flex居中(演示)。CSS3中引入的新布局方式，比较好用。缺点：IE9以及IE9一下不兼容。

body>div:nth-of-type(4) width:400px; height:400px; background:#ff0; margin-bottom:10px; display:flex; justify-content:center;align-items:center

body>div:nth-of-type(4) div width:100px; height:100px; background:#0f0;

第五种：利用table-cell来控制垂直居中。

body>div:nth-of-type(5) width:400px; height:400px; background:#ff0; margin-bottom:10px; vertical-align:middle; display:table-cell; text-align:center;

body>div:nth-of-type(5) div width:100px; height:100px; background:#0f0; display:inline-block

第六种：利用空盒子做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果。

body>div:nth-of-type(6) width:400px; height:400px; background:#ff0; margin-bottom:10px; text-align:center; vertical-align:middle;

body>div:nth-of-type(6) div width:100px; height:100px; background:#0f0; display:inline-block; vertical-align:middle;

body>div:nth-of-type(6) span width:0; height:100%; display:inline-block; vertical-align:middle;

第七种：这种方法灵活运用CSS中transform属性，较为新奇。缺点是IE9下不兼容。

body>div:nth-of-type(7) width:400px; height:400px; background:#ff0; position:relative; margin-bottom:10px;

body>div:nth-of-type(7) div width:100px; height:100px; background:#0f0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)

如何让DIV里面的DIV水平垂直居中

让DIV里面的DIV水平垂直居中有2种方法：
方法一：
让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。
.mydiv
margin:0 auto;
width:300px;
height:200px;

方法二：
要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
.mydiv
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px


该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要弹出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。 参考技术A div实现水平居中只需要设置固定宽度和margin:0 auto即可，
给你2个解决方案:
1、条件是div的高度和宽度是固定的
<style type="text/css">
<!--
div1
position:relative;
width:600px;
height:500px;
border:1px solid #008800;

div2
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
-->
</style>
<div class="div1">
<div class="div2">让层垂直居中</div>
</div>
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于父级层的样式编写。

2、条件是div的高度和宽度是不固定的

如果div宽度不固定，那用div就有点困难了，虽然用js获取当前高宽再附加css可以解决，但是要用到js来解决问题就有点逊了；
我给你一个思路，你不妨试试table布局，table不设置宽度的情况下默认是宽度和高度都是最小化的，这样给table设置margin:0 auto就可以让这个table水平方向居中；

解决了水平居中，那就来解决垂直居中，td中的内容默认是垂直居中的，那么只要两者互相嵌套一下不就解决水平垂直居中了!
但是有一个问题，你所需要垂直居中的父级table的高度是否固定，如果父级高度固定，那么子级高度不固定也一样可以垂直居中本回答被提问者和网友采纳