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

html-css08

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

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

上下居中··这个肯定就要用js算出来了···靠右对齐有很多种方法··position: fixedright: 0这样就靠右并且随滚动条滚动·一直固定在位置上···如果你是要做那种右下角的小窗口···纯css是不能解决问题的·

有很多种实现方法，下面是用最简单的方法实现的，

思路，2个div用一个div包起来，然后让两个div浮动。然后给外面的父级进行定位。仅供参考。

<style type="text/css">

            * {margin:0px padding:0px}

.box {position:absolute top:50% left:50% width:200px height:100px margin-left:-50px margin-top:-50px}

.div1 {width:100px height:100px background:#ccc float:left}

        </style>

</head>

<body>

<div class="box">

<div class="div1"></div>

<div class="div1"></div>

</div>

</body>