div 中如何让两个DIV居中？
方法一、小div绝对定位或相对定位，这样小div脱离标准流，大div有固定宽高，用小div的margin去挤大div
Title
.father{
width: 600px;
height: 600px;
background-color: orangered;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
position: absolute;
margin: 200px 150px;
}
注意：如果小div没有绝对定位或相对定位，且大div没有border，那么小div的margin实际上踹的是“流”，踹的是这“行”。如果用margin-top，大div整体也掉下来了。如下：
方法二、如果给大div加一个border，使大div，小div都不定位，用小div的margin去挤大div，实现小div居中。
Title
.father{
width: 600px;
height: 600px;
background-color: orangered;
border: 1px solid white;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
margin: 200px 150px;
}
显示结果如下：
方法三、小div绝对定位，大div相对定位，定位到大盒子的宽高一半的位置，再上下各margin负的自己宽高的一半
Title
.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;
}
显示结果如下：
扩展资料：
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。工程上，“子绝父相”有意义，父亲元素没有脱标，儿子元素脱标在父亲元素的范围里面移动。
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
display:inline和display:inline-block，会使margin:0 auto;失效。
固定宽度的盒子才能使用margin:0 auto;居中
新建一个容器，让它包含你的3个find_button，给它指明id,如：
然后在css文件中给它定义外边距、宽、高等，如：
#center{margin:0 auto;width:500px;height:200px;background:#900;}
/*margin:0 auto;解决居中问题；width:500px;height:200px;指明宽和高；background:#900;设为红色背景以便看到效果。*/
1.先说文字居中。
此处是垂直居中，关键代码height:105px;line-height:105px;两个值要相等。
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;' >居中</div>
2.文字横向居中，关键代码text-align:center
<div style=' height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center'>ju zhong</div>
3.图片居中，代码如下：
<div style=' height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center'><img src="1.png" alt="" /></div>
4.图片垂直居中，关节代码display: table-cell; vertical-align:middle;
代码如下；
<div style=' height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center ; display: table-cell; vertical-align:middle; '><img src="1.png" alt="" /></div>
这个用dt,dl列表完成比较合理一些，当然用div也无妨，没几个人看代码，基本实现就可以了
关键属性就是2个DIV都有个float:left;这样就可以了
仍有疑问，补充追问
图片DIV float left 标题和描述 DIV float right
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div class="div1" style="width:980px;height:500px;border:1px solid red;">
<div align="center">
<div class="div2" style="width:200px;height:500px;border:1px dashed red;"></div>
</div>
</div>
</body>
</html>
发你百度嗨了 瞧瞧吧
沃逄瑞立： 在父div的样式中添加样式定义 vertical-align:middle;来设置子div垂直居中
青龙满族自治县13147458986： 如何让div中的div居中 - ？
沃逄瑞立： body{ margin:0; padding:0 ; text-align:center}外面的DIV不写宽度,里面的两个写上宽度就行了, 这是一种,看是不是你要的.我刚写完一个.
青龙满族自治县13147458986： 怎么让两个DIV 嵌套居中 - ？
沃逄瑞立： 用align=＂center＂实现居中<div align=＂center＂> <div align=＂center＂> </div></div>
青龙满族自治县13147458986： 两个DIV如何居中在一列 - ？
沃逄瑞立： 居中方法太多啦!一般都用margin:0 auto;<body> <div style=＂margin:0 auto;width:604px;＂> <div style=＂float:left;width:300px;border:1px solid #CCC＂> <h1>此处显示新 Div 标签的内</h1> </div> <div style=＂float:left;width:300px;border:1px ...
青龙满族自治县13147458986： 如何让2个DIV整体构成的页面居中 - ？
沃逄瑞立： 不知道你需不需要垂直方向也居中,所以只是写了水平方向的,如果需要你再补充.如果你要的任意高度的DIV,其实高度并不影响他的居中效果,影响居中效果的是position:absolute;width:100px;left:50%;margin-left:-100px;其实这段代码的意...
青龙满族自治县13147458986： dreamweaver中如何把两个DIV并在一起并且居中 - ？
沃逄瑞立： 用另一个div包起来,然后将最外层的div设置成居中即可.最外层的div的宽度要设置成里面两个div之和,然后给最外层的div加上margin:0 auto;即可.更多知识交流可以加984841227 加时注明div+css
青龙满族自治县13147458986： 如何让div中的两个div垂直居中 - ？
沃逄瑞立： display:inline-block;父标签的veritcal-algin:middle;试试
青龙满族自治县13147458986： 怎么让一个小的div在另一个大的div中居中显示.如下图中的两个div. - ？
沃逄瑞立： 首先都有俩个内框装内容了,外框就没必要在设定比他们还打的宽度,直接自适应就好了,,其次,你这个估计是浮动了??那就不好在居中了,除非三个框的宽度都知道,通过margin-left:xxxpx;来调整居中了
青龙满族自治县13147458986： DIV+CSS3 两个DIV 我想让第一个div居中 然后第二个div紧挨着第一个DIV的右侧 谢谢各位的回答~ - ？
沃逄瑞立： 第一个div用margin:0 auto;来居中,第二个DIV用绝对定位来处理,这样就是紧紧的挨着了
青龙满族自治县13147458986： 如何让一个div中的两个div垂直居中 - ？
沃逄瑞立： 方法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:...
