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

发布网友发布时间：2022-04-25 16:13

我来回答

共12个回答

热心网友时间：2022-04-06 13:18

方法一、小div绝对定位或相对定位，这样小div脱离标准流，大div有固定宽高，用小div的margin去挤大div

<!DOCTYPE html>

<html><head><meta charset="UTF-8"><title>Title</title><style>

.father{

width: 600px;

height: 600px;

background-color: orangered;

}

.son{

width: 300px;

height: 200px;

background-color: lawngreen;

position: absolute;

margin: 200px 150px;

}

</style></head><body><div><div></div></div></body></html>

注意：如果小div没有绝对定位或相对定位，且大div没有border，那么小div的margin实际上踹的是“流”，踹的是这“行”。如果用margin-top，大div整体也掉下来了。如下：

方法二、如果给大div加一个border，使大div，小div都不定位，用小div的margin去挤大div，实现小div居中。

<!DOCTYPE html>

<html><head><meta charset="UTF-8"><title>Title</title><style>

.father{

width: 600px;

height: 600px;

background-color: orangered;

border: 1px solid white;

}

.son{

width: 300px;

height: 200px;

background-color: lawngreen;

margin: 200px 150px;

}

</style></head><body><div><div></div></div></body></html>

显示结果如下：

方法三、小div绝对定位，大div相对定位，定位到大盒子的宽高一半的位置，再上下各margin负的自己宽高的一半

<!DOCTYPE html>

<html><head><meta charset="UTF-8"><title>Title</title><style>

.father{

width: 600px;

height: 600px;

background-color: orangered;

position: relative;

}

.son{

width: 300px;

height: 200px;

background-color: lawngreen;

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -150px;

}

</style></head><body><div><div></div></div></body>

</html>

显示结果如下：

扩展资料：

一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。工程上，“子绝父相”有意义，父亲元素没有脱标，儿子元素脱标在父亲元素的范围里面移动。

绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。

display:inline和display:inline-block，会使margin:0 auto;失效。

固定宽度的盒子才能使用margin:0 auto;居中

热心网友时间：2022-04-06 14:36

实现原理是设置margin自动适应,然后设置定位的上下左右都为0。

就如四边均衡受力从而实现盒子的居中：

代码：

扩展资料

div+css绝对定位

使用通常是父级定义position:relative定位

子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。

.divcss5{position:relative} 定义，通常最好再定义CSS宽度和CSS高度
.divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px，距离父级上边距离为10px
参考资料

百度百科-div css

热心网友时间：2022-04-06 16:10

小div在大div中居中可以设置合适的padding 或margin值，尺寸计算对了就好

当然如果尺寸不方便计算的话那就使用定位属性，小的div在大的div中分别绝对定位为：left：50%；top:50%,然后再添加margin-left\top属性，值为负的小div的宽高的一半~

简单代码如下：

<html>
<head>
<title>淘宝 2faner</title>
<style type="text/css">
.big{
width: 800px;
height: 500px;
background: #333;
position: relative;
}
.small{
width: 400px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left:-200px;
margin-top: -100px;
background: #fff;
}
</style>
</head>
<body>
<div class="big">
<div class="small">

</div>
</div>
</body>
</html>

热心网友时间：2022-04-06 18:02

方法1：

.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：

.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：

.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：

.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;
        }

热心网友时间：2022-04-06 20:10

如果说是div里面套着div的话，就可以直接设置外面的div的valign属性的值为middle。
valign 属性规定单元格中内容的垂直排列方式

热心网友时间：2022-04-06 22:34

方法一，小div在大div中居中可以设置合适的padding 或margin值

方法二，使用定位属性，小的div在大的div中分别绝对定位为：left：50%；top:50%,然后再添加margin-left\top属性，值为负的小div的宽高的一半~

热心网友时间：2022-04-07 01:16

大小div分别设置宽高；

大div{position:relative}；
小div{position:absolute;top:50%;margin-top:-小div高度的一半px}；
注意上面有个负号别丢了；
对这方面感兴趣可以去w3cschool学习。

热心网友时间：2022-04-07 04:14

<!DOCTYPE html>

<html>

<head>

.a1{

width: 100px;

height: 100px;

background-color: red;

}

.a2{

margin: auto;

width: 50px;

height: 50px;

background-color: blueviolet;

}

</style>

</head>

<body>

<div class="a1">q

</div>

</body>

</html>

使用 margin: auto;

热心网友时间：2022-04-07 07:28

两种方法
1 外div的高有定值，比如div高200 ，内div高100，那么通过计算margin-top进行定位，（200-100）/2=50，则 margin-top：50px
2 外div的高不确定，采用决对定位，position 结合margin，这个方法比较复杂，要对 position margin有深刻理解才行，可以百度搜索一下，这里就不详述了

热心网友时间：2022-04-07 11:00

div{
width: 100%;
height: 3rem;
border-bottom:solid 0.05rem green;
line-height: 3rem;
}
div img{
width: 3rem;
height: 2.5rem;
vertical-align:middle;
}
line-height别掉下否则不起作用

热心网友时间：2022-04-07 14:48

上面方法很多，但是最好的最通用的一个就够了：

热心网友时间：2022-04-07 18:52

提供一个截图供参考：

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

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