css垂直居中的几种方法
CSS垂直居中有以下几种方法：
1. 使用绝对定位：父容器设置`position: relative;`，子容器设置`position: absolute; top: 50%; transform: translateY(-50%);`将元素水平垂直居中处理后再设置`margin: auto 0;`使其左右对齐，利用绝对定位实现元素垂直居中，但该方法只能固定高度容器元素才有效；
css固定定位
2.  Flexbox 布局：子容器设置 `display:flex;`，`align-items:center;`设置容器元素的内容垂直居中；
3.  使用表格布局：父容器设置`display:table;`和`height:100%;`，子容器设置`display:table-cell; vertical-align:middle;`，可以把子容器完全垂直居中；
4. 使用线性渐变：用`background:linear-gradient(top,colour-stop(50%,transparent),colour-stop(50%,white))`可以把元素垂直居中，但此方法同样也需要指定宽高。
5. 使用 Grid 布局：子容器的 `display：grid;`和`justify-content: center;`把元素垂直居中；
6. 使用伪元素：可以同时在父容器和子容器上设置伪元素，使用`{ height: 100%; }` 把元素局限在父容器的范围，再利用`top:50%; transform: translateY(-50%);`把元素垂直居中；
7. 使用`margin`属性：利用`auto`设置上下方向的margin值，让元素居中，但此方法和绝对定位一样，只能用于有高度的定宽容器元素。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。