[分享]css3怎么垂直文字

 今天我们来讲一下CSS3怎么垂直文字。 在很多情况下我们需要把文字垂直居中，如在导航栏、列表或者按钮等等各种元素中。 在CSS3中，有几种方法可以实现垂直居中。下面我们给大家介绍其中两种方法。 第一...

 今天我们来讲一下CSS3怎么垂直文字。 在很多情况下我们需要把文字垂直居中，如在导航栏、列表或者按钮等等各种元素中。
在CSS3中，有几种方法可以实现垂直居中。下面我们给大家介绍其中两种方法。
第一种方法是使用CSS3的flex属性。我们可以通过给容器设置display: flex属性并将其子元素设置为align-items:center;，就可以垂直居中其内容了。
例如：

  <p class="container">
            <span>这里是垂直居中的文字</span>
        </p>
        <style>
            .container {
                display: flex;
                align-items: center;
                height: 100px; /* 容器高度 */
            }
        </style> 

这样就可以实现垂直居中了。
第二种方法是使用position和transform属性。我们可以通过定位和偏移的方式来实现垂直居中。
例如：

  <p class="container">
            <span>这里是垂直居中的文字</span>
        </p>
        <<style>
            .container {
                position: relative;
                height: 100px; /* 容器高度 */
            }
            .container span {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }
        </style> 

这样就可以实现垂直居中了。
以上两种方法都可以实现垂直文字，根据需求选择更加合适的方式。希望对大家有所帮助。