CSS3新增特性包括选择器、背景和边框、文字效果、变换、动画、阴影、图像像素操作等。
要使一个盒子水平垂直居中，可以使用CSS3的flex布局或grid布局，或者使用position属性和transform属性。以下是使用flex布局的例子：
.centered-container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 使容器的高度为视口高度 */
}
.box {
width: 50px; /* 盒子宽度 */
height: 50px; /* 盒子高度 */
background-color: blue; /* 盒子背景色 */
}
<div class="centered-container">
<div class="box"></div>
</div>使用position和transform的例子：
.centered-container {
position: relative;
height: 100vh; /* 使容器的高度为视口高度 */
}
.box {
width: 50px; /* 盒子宽度 */
height: 50px; /* 盒子高度 */
background-color: blue; /* 盒子背景色 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="centered-container">
<div class="box"></div>
</div>在这两个例子中，.box都会在.centered-container内水平垂直居中。