今天我们来学习关于“在CSS中让文字水平垂直居的做法是什么”的内容，下文有详解方法和实例，内容详细，逻辑清晰，有需要的朋友可以参考，希望大家阅读完这篇文章后能有所收获，那么下面就一起来了解一下吧。

CSS设置文字水平垂直居中的方法

1、新建一个html文件，命名为test.html，用于讲解css如何让文字水平和垂直都居中。在div内，使用span标签创建一行文字，用于测试。设置div的class属性为mydiv。

在css标签内，通过class设置div的宽度为200px,高度为100px,边框为1px。

2、在css标签内，将display属性设置为flex，实现flex布局，再将align-items属性设置为center(水平方向居中)，justify-content属性设置为center（垂直方向居中）。

在浏览器打开test.html文件，查看实现的效果。

总结：

1、在div内，使用span标签创建一行文字，设置div的class属性为mydiv。

2、在css标签内，通过class设置div的宽度为200px,高度为100px,边框为1px。

3、在css标签内，将display属性设置为flex，实现flex布局，再将align-items属性设置为center(水平方向居中)，justify-content属性设置为center（垂直方向居中）。

关于“在CSS中让文字水平垂直居的做法是什么”就介绍到这了，如果大家觉得不错可以参考了解看看，如果想要了解更多，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS制作无限弹幕滚动效果的思路是怎样的？

  用CSS制作无限弹幕滚动效果的思路是怎样的？下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• CSS中常见的清除浮动方法和优缺点分别是什么

  1、采用伪类:after进行后续空制的高度位零的伪类层清除2、采用cssoverflow:auto的方式撑高3、采用cssoverflow:hidden的方式产生怪异适应4、采用display:table将对象变成table形式5、采用div标签，以及css的clear属性6、采用br标签，以及css的clear属性7、采用br标签，以及其自身html的clear属性粗略的看，他们都能将问题解 ...

• CSS中display:box属性可用于做什么，怎么用

  这篇文章主要介绍了css display:box 新属性的相关资料,需要的朋友可以参考下

• HTML中怎么实现加载摄像头，方法及代码是什么

  这篇文章主要介绍了如何在HTML里加载摄像头，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• HTML5移动端页面无缝闪开的效果怎么实现

  这篇文章主要介绍了HTML5页面无缝闪开方案,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下