对于垂直居中，有两种常用的CSS方法： flexbox布局： - 建立一个父元素，并给其添加 `display: flex` 属性。 - 将要居中的元素作为子元素放到父元素中，并添加 `margin: auto` 属性。 grid布局： - 建立一个父元素，并给其添加 `display: grid` 属性。 - 将要居中的元素作为子元素放到父元素中，并添加 `align-self: center` 属性。 这两种方法都能实现垂直居中，但flexbox布局更适用于同时垂直和水平居中的情况，而grid布局更适合复杂布局的情况。
要实现盒子在网页垂直居中，可以采用以下方法：首先给父容器设置 position:relative; 内容框盒子设置 position:absolute; 上下左右都设置为0，再利用 transform: translate(-50%,-50%);来使内容框盒子水平、垂直居中。此外，也可以通过设置父容器的 display:flex; align-items:center; justify-content:center;将子元素居中，其中，align-items:center;可以实现垂直居中，justify-content:center;可以实现水平居中。
