css字体居中(css实现垂直水平居中)

  CSS 是前端里面的基础之一,也是非常重要的一部分,它往往决定了你所做出来的网页页面是否美观。在设计网页页面的过程中,总会有将元素或者文字进行水平垂直居中的要求。

image.png

  CSS中文字居中显示的方式有以下四种:

  1.使用text-align属性设置文本的对齐方式

  将text-align属性值设置为center可以将文本居中显示。

  .center {

  text-align: center;

  }

  2.使用vertical-align属性设置元素的垂直对齐方式

  将vertical-align属性值设置为middle可以将文本垂直居中显示。

  .center {

  vertical-align: middle;

  }

  3.使用line-height属性设置行高

  将line-height属性值设置为比字体大小略大的值,可以使文本在容器中垂直居中显示。

  .center {

  line-height: 20px;

  }

  4.使用display

  display: flex属性将父元素设置为弹性布局,并使用align-items: center属性将子元素在交叉轴上居中对齐。

  .center {

  display: flex;

  align-items: center;

  }


发表评论

评论列表

还没有评论,快来说点什么吧~