编程教育资源分享平台

网站首页 > 后端开发 正文

优雅的使用CSS实现文字居中显示

luoriw 2024-02-01 14:28:07 后端开发 11 ℃ 0 评论

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

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

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

.center {
  text-align: center;
}

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

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

.center {
  vertical-align: middle;
}

使用line-height属性设置行高

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

.center {
  line-height: 20px;
}

使用display

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

.center {
  display: flex;
  align-items: center;
}

使用position

position: absolute属性和transform: translateY(-50%)将子元素相对于其父元素垂直居中对齐。

// 父容器
.center {
  position: relative;
  height: 200px;
}

// 子容器
.center > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  height: 100px;
  width: 200px;
  background-color: #ccc;
}

以上就是CSS中文字居中显示的几种方式,根据实际需求选择合适的方式即可。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表
最新留言