内联CSS里的DIV居中显示

在内联CSS里使得DIV居中显示，参考页面的代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>设置长宽使内DIV"居中"</title>
<style type="text/css">
/*两个DIV，其中一个居中显示----CSS部分*/
    #box1{
        border:red 2px solid;
        text-align:center;
    }
    #box2{
        border:outset 4px #aaa; /*outset->3D凸边*/
        width:300px;
        height:400px;
        text-align:left;

     margin-right:auto; /*这样就可以居中了，也可以定义成 margin-right:inherit;*/
     margin-left:auto;
    }
    #box2 h2{
        border-bottom:double 6px #999;
        padding:10px; /*元素四个边源的空白*/
        margin:6px; /*元素四个边源的边距*/
    }
    #box2 p span{
        border-bottom:#66cc66 solid 1px; /* 定义列表项底边框样式*/
    }
</style>
</head>
<body>
    
        <div id="box1">
            <div id="box2">
                <h2>inline元素的边框</h2>
                <p>内联元素都是随行就市,因此它的上下边框高度不能超过行高。内联元素总是<span>随波逐流</span>,因此它的左右边框宽度会挤占左右相领文本位置。
                </p>
            </div>
        </div>
</body>
</html>