两个div上下显示，并居中。

问题:

<div class="outer">
            <div class="box in1">in1</div>
            <div class="box in2">
                    <form action = '' method="post">
                    <div class="calc" >
                    <div class="tab">
                        <span class="span">计算器</span>
                        <span>对照表</span>
                    </div>
                    <div class="inputcode" style="display: block;">
                          ............
                    </div></form>
            </div>
</div>

不太会html，勉强能用，但调整位置却头疼了。
in1 和in2 上下显示，并居中。
百度看了下，但效果都不好。

我自己想了个办法：
我以为在in1那个div 左边在加一个div，给它设个宽度来占位，这样in1不就可以调整到中间了吗。
可是问题是，”计算器“”对照表“ 这两行却跑到右上去了。

怎么让in1 和in2 上下显示，并居中。（span两行不能跑右上去了，它们是in2里面的，不能自己乱跑）

回答1:

试了一下这样就可以了，我这种方式是outer 这个盒子是在浏览器垂直居中的
.outer {
width: 800px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
background: #fbfbfb;
margin-top: -300px;
margin-left: -400px;
}
.in1{
background-color:red;
}
.in2{
background-color:yellow;
}

回答2:

看不到你的class样式，如果你的两个div是要相对于整个浏览器的大小居中，并且两个div的宽度都是已知固定的，则你给你的两个div都加一句margin: 0 auto;
例如：.in1{width：100px;margin:0 auto} .in2{width:200px;margin:0 auto}