如何实现短小文字上下居中

img

img

img

如何实现短小文字上下居中，如图一想让文字居于文本框的中心，而图二也是一样不超出文本框条件下上下都居中

display：flex;justify-content:center;align-items:center;

之前特意研究了几个方法，可参考一下 文本垂直居中实现方法_蓑笠翁-CSDN博客   大家都知道css中使文本等元素水平居中的最常用的方法就是设置父盒子text-align: center;子盒子margin: 0 auto; 即可；而目前垂直居中没有看到说明最常用的做法，现在我们给出实现元素垂直居中的几个方法；方法一：line-height;  这应该是我目前知道实现垂直居中最简单实用的方法；对于只有单行文字的，可使用该方法实现文本垂直居中；只需要在父容器中设置linline-height与height相等即可：.parent-box { height: 200p https://blog.csdn.net/m0_46309087/article/details/113532542?utm_source=app&app_version=4.9.1&code=app_1562916241&uLinkId=usr1mkqgl919blen

你可以 用个div 把文字包裹住 并给父级设置 flex 利用弹性盒模型 让div居中

flex布局

img