div+css 怎么让一个小div在另一个大div里面 垂直居中
上下垂直居中 在线演示 DIVCSS5 #main {position: absolute;width:400px;height:200px;left:50%;top:50%; margin-left:-200px;margin-top:-100px;border:1px solid #00F} /*css注释：为了方便截图，对CSS代码进行换行*/ DIV水平居中和上下垂直居中
html中让一个DIV在另一个DIV中水平垂直居中，可以通过将一个div包裹第二个div，然后在将设置第一个div的宽高，要比第二大上很多，然后在设置第二个的宽高，然后通过margin：auto auto；这里我提交代码:
文字测试
#test{
width:800px;
height:400px;
border:1px solid #f00;
}
#test1{
width:400px;
height:200px;
border:1px solid #0f0;
margin:auto auto;
}
我是第二个div
方法一、小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;居中
实现原理是设置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
方法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;
}
小div在大div中居中可以设置合适的padding 或margin值，尺寸计算对了就好
当然如果尺寸不方便计算的话那就使用定位属性，小的div在大的div中分别绝对定位为：left：50%；top:50%,然后再添加margin-leftop属性，值为负的小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>
<!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;
地思盐酸：
西岗区17155209435： div+css如何让一个div块不受整体的css样式控制 - ？
地思盐酸： 给一个DIV一个ID值,然后在CSS里面单独给这个ID值写属性值. 例如: HTML中:<div id=＂cube＂></div> 在CSS里面这样写:#cube{属性:值}
西岗区17155209435： 如何在大的div块里嵌套小的div块 - ？
地思盐酸： 你这个问题根本就不清晰!大的div块里嵌套小的div块,不就是像<div id=＂e＂><div id=＂a＂></div></div> id=＂e＂的设置为大的div,id=＂a＂的设置为小的div 不知道你是不是要问这个....
西岗区17155209435： css如何把一个小div放在图片上的某个区域 - ？
地思盐酸： 需要两个div.大div包含图片,小div和图片一块儿放在大div里,然后对小div加CSS,position:relative;后用top,bottom,right和left来固定位置.relative是根据父级元素定位的.
西岗区17155209435： 请问用DIV+CSS怎样实现下面这样的菜单 - ？
地思盐酸： 1、你可以先给整体定一个div,并给该div设置下边框,如border-bottom:1px solid #000000 这样整体定位和下边线就都有了 2、然后里面需要分几行你就并列写几个div来控制就可以了,一般你写多个div它自己就会竖列显示了 3、里面每一项菜单...
西岗区17155209435： 如何在大的div块里嵌套小的div块？
地思盐酸：看完这方面就不用愁了 DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式...
西岗区17155209435： CSS+DIV布局如何让一个div的位置随着另一个div的大小的变化 - ？
地思盐酸： <div>middle</div><div>foot</div> 如果html是上面正常结构,css里面你没乱用定位去布局大的版面排版,并且有浮动的地方正确的浮动了,那么正常情况下foot本来及是在middle下方的,并且middle里面内容多高度变化就会把boot往下挤.把代码发出来,你多半是错误的使用定位属性去拼出页面了.
西岗区17155209435： 如何给动态生成的div加css样式 - ？
地思盐酸： 动态生成的div也是要放在一个父级元素中的吧假设动态生成的div欲放在id=＂a1＂或class=＂b1＂的元素中时,可以用包含包含选择符定义样式,如下:#id div{width:100px; ...
西岗区17155209435： 您好,DIV任何实现嵌套,比如大DIV上面上浮一个小DIV - ？
地思盐酸： <!DOCTYPE html PUBLIC ＂-//W3C//DTD XHTML 1.0 Transitional//EN＂ ＂http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd＂><html xmlns=＂http://www.w3.org/1999/xhtml＂><head><meta http-equiv=＂Content-Type＂ content=＂text/html...
西岗区17155209435： 怎么利用div+css定义一个div中的img都是固定大小啊!!急 - ？
地思盐酸： .aa { width: 50px; position: absolute; height: 50px; overflow: hidden; border-top-style: none; border-right-style: none; border-left-style: none; border-bottom-style: none; } <div class=＂aa＂> <asp:Image ID=＂Image1＂ runat=＂server＂ ImageUrl=＂42349979200802162031304051400778396_001.jpg＂ /></div> </div> 这样就行了哈
