/* 水平居中设置 */
.box {
width: 50%; /*这是大家需要居中的元素的宽度*/
margin: 0 auto; /*利用margin来实现水平居中*/
background-color: #f5f5f5; /*设置元素背景色*/
}上述代码中，大家首先设置了需要居中的元素的宽度，然后在其margin属性中设置了0和auto，这样就能够让元素的左右margin值相等，实现了水平居中的效果。
/* 垂直居中设置 */
.parent {
height: 200px; /*容器元素的高度*/
display: flex; /*弹性布局方式，将子元素放置于容器的中央*/
justify-content: center;
align-items: center;
background-color: #ddd; /*容器元素的背景色*/
}
.child {
width: 100px; /*需要设置垂直居中的子元素的宽度*/
height: 50px; /*需要设置垂直居中的子元素的高度*/
background-color: #333; /*子元素的背景色*/
color: #fff; /*子元素的文本颜色*/
}上述代码中，大家设置了一个父元素和一个子元素，同时利用CSS的弹性布局方式（flex）来实现垂直居中的效果。在父元素中，大家通过设置display为flex，并利用justify-content和align-items属性来让子元素在父元素的中央居中。在子元素中，大家设置了该元素的宽度、高度、背景色和文本颜色。
当大家需要在实际开发中实现元素的框居中时，以上两种方法是非常常见的解决方案。希望本文能够对大家有所帮助，增加CSS的理解和掌握程度。