比如我想在页面横行上显示3个块，比如网页是800的宽度，我的块是200宽度，现在网页是800的时候一行显示3个，当网页宽度是300的时候，3个块分3行居中显示，应该如何做呢？
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box {margin: 0 auto;}.item {float: left;width: 30%;height: 200px;border: 1px solid red;}@media screen and (max-width: 300px) {.item {float: none;display: block;text-align: center;width: 300px;background: rebeccapurple;}}</style></head><body><div id="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body></html>