网页设计中的css盒子内容居中，你可以先写2个div,第一个包裹着第二个，然后在设置第一个的宽高，在通过margin：0 auto；居中就行，margin的意思就是距离浏览器的外边距，如图:
这里我写段代码：
<html>
<head>
<title>网页居中</title>
</head>
<style>
#div1{
widrh:960px
height:700px
mrgin:0 auto
}
#div2{
widrh:660px
height:300px
mrgin:0 auto
}
</style>
<body>
<div id='div1'>
<div id='div2'>
<p>内容居中文字</p>
</div>
</div>
</body>
</html>
举个例子<div style="width: 200pxheight: 200pxbackground: bluemargin: 0 auto"></div>
这一行直接放到body里边，他肯定是居中的。
flex居中:
<div style="display: flexjustify-content:center">
<div style="width: 200pxheight="200pxbackground: red"></div>
</div>
这个也能实现居中，当然也可以垂直居中，垂直的话display: flex后面加上flex-direction: column就可以了。
这里的分号是分隔符，最后一个样式可以不加，但只要后面有其他样式就必须要加分号，不然样式会失效。
最传统的办法就是 在块 跟文字的左右两边加 <center></center>这是很早以前的写法。垂直居中的话可能又点难，除非用弹性盒子，正常的话。margin：0 auto； 水平都是能居中的
display: flex//设置成弹性的
justify-content: center主轴对齐方式 居中
align-items: center//侧轴对齐方式 居中
就是把 包围块跟文字的那个div 设置成这个属性 那它里面的标签都会 水平加垂直居中
还有一种办法就是 用margin：0 auto； 水平居中后 用padding 来控制上下的内边距，这样实现垂直居中的效果。 用padding的时候最好加上box-sizing: border-box// 总的盒子的大小不会变。
