在不使用position 和float的情况下怎么实现？

图片说明

请教：在不使用position 和float的情况下怎么实现

<style type="text/css">
.div1 {
    width: 300px;
    height: 100px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    margin: 0 0 -10px 10px;
}
.div2 {
    width: 320px;
    height: 20px;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

<style type="text/css">
.div1 {
    width: 300px;
    height: 100px;
    border： 1px solid #ccc;
    margin: 0 auto;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>