水平垂直居中的方法
    1、水平垂直居中的方法：
css设置文字垂直居中
    （1）使用CSS Flexbox。Flexbox是CSS3新增的布局模式，它能够轻松地使元素水平垂直居中。实现方式非常简单，只需给父容器设置一个display: flex，再设置justify-content属性为center和align-items属性为center就可以让子元素垂直水平居中。
    （2）使用CSS Grid。CSS Grid也是CSS3新增的布局模式，它同样可以实现元素的水平垂直居中。实现方式与flexbox类似，只需给父容器设置一个display: grid，再设置justify-content属性为center和align-items属性为center即可将子元素居中。
    （3）使用CSS Translate。另外，我们也可以使用CSS的translate函数来实现元素的水平垂直居中，只需要给元素设置如下样式：transform: translate(-50%, -50%);这样就可以把元素水平垂直居中了。
    （4）绝对定位+设置margin。使用绝对定位也可以实现元素的水平垂直居中，我们可以让父容器设置position:relative，子元素设置position:absolute，然后设置top、bottom、left、rig
ht四个属性值为auto，这样就可以实现元素的垂直水平居中。
    （5）使用text-align属性。对于一些文字或者文本，我们可以使用text-align属性来实现其垂直水平居中，只需给元素设置一个 text-align: center; 就可以实现文本的居中。
    （6）使用Table布局和Vertical-Align属性。我们可以使用表格来实现元素的水平垂直居中，只需要将要居中的元素包装在一个表格中，再设置表格的margin-left和margin-right属性值为auto，再设置表格元素的vertical-align属性值为middle，就可以将该元素居中。
    总之，实现元素的水平垂直居中有很多种方法，可以根据实际情况来选择最适合的方法，以达到最好的效果。

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