只需要加上padding元素，内容四周便会留下空白，实现水平垂直居中的效果
css代码如下：
.demo{
width: 200px;
border: 1px solid red;
padding: 20px;
}
HTML代码如下：
<div class="demo">
this is a test of margin
this is a test of margin
this is a test of margin
this is a test of margin
this is a test of margin
</div>
效果是这样的：
扩展资料：
关于上述中div设置具体高度
1、内容只有一行
设置div的line-height和div的高度一样即可。
2、内容不确定有几行
这时候需要在div中再加一层结构，用p标签或者div都可以。
css代码如下：
.demo{
position: absolute;
width: 200px;
height: 200px;
border: 1px solid red;
}
p{
position: absolute;
width: 150px;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
border: 1px solid black;
}
