居中的文本框，周围有边框

Question

 body { display: flex; align-items: center; background-color: black; } h1 { font-size: 8rem; border: 0.1em solid white; color: white; text-justify: center; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; flex: 1; display: inline-flex; justify-content: center; } /* Want this: ------------- |Hello world| ------------- On all screens big and small, portrait or landscape. */ 

 <h1>Hello World</h1> 

我想我需要根据屏幕的宽度来更改文本大小，并且我不知道如何在框中显示文本的正当性。 此外，我希望边框位于文本周围，而不像我们看到的那样拥抱可用宽度： https : //s-ckwvolnvzl.now.sh/

寻找一个最小的解决方案，所以如果文本调整大小太困难了，那就算了。 谢谢！

Answer 1

您可以使用视口单位使文本可调整大小。

我在主体中添加了justify-content属性以使文本居中，并将h1更改为display: inline-block以确保边框仅围绕文本。

 body { display: flex; align-items: center; background-color: black; justify-content: center; } h1 { font-size: 15vw; /* change this value as you need */ border: 0.1em solid white; color: white; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; display: inline-block; } /* Want this: ------------- |Hello world| ------------- On all screens big and small, portrait or landscape. */ 

 <h1>Hello World</h1>