[分享]css两行字如何居中

在网页开发中，经常需要将一些短小的文字或者图标居中显示。其中有一种常用的方式是使用CSS将两行字居中。样式代码如下： .center { display: flex; justifycontent: ...

在网页开发中，经常需要将一些短小的文字或者图标居中显示。其中有一种常用的方式是使用CSS将两行字居中。

样式代码如下：

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
} 

其中，使用了flex布局的方式，通过justify-content属性将元素在主轴上居中对齐，align-items属性将元素在交叉轴上居中对齐。这样，无论是文字还是图标，都可以轻松实现居中显示。

在HTML中，只需要将需要居中显示的内容放置在一个容器元素中，并为该元素添加.center类即可：

HTML代码如下：

<div class="center">
  <p>这是第一行文字</p>
  <p>这是第二行文字</p>
</div> 

这样，我们就可以实现将两行字居中显示的效果。