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

写一个简单的例子给我吧... 写一个简单的例子给我吧 展开
 我来答
MyOpen
2019-05-21 · TA获得超过2861个赞
知道答主
回答量:68
采纳率:0%
帮助的人:4万
展开全部

方法一、小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;居中

xp19971025
推荐于2019-10-31 · TA获得超过17.6万个赞
知道小有建树答主
回答量:42
采纳率:100%
帮助的人:2.2万
展开全部

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

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

代码:

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

扩展资料

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




本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
纯洁的小树
推荐于2017-09-04 · TA获得超过3386个赞
知道大有可为答主
回答量:2536
采纳率:71%
帮助的人:448万
展开全部

方法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;
        }
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
码农不过如此
推荐于2017-09-21 · TA获得超过295个赞
知道小有建树答主
回答量:134
采纳率:100%
帮助的人:71.3万
展开全部

小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>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友1c18104
推荐于2019-09-29 · 超过16用户采纳过TA的回答
知道答主
回答量:27
采纳率:100%
帮助的人:26.5万
展开全部

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style >

.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 class="a2">q</div>

</div>

</body>

</html>

使用 margin: auto; 

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(10)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式