css字体居中下面显示文字

在进行网页设计时，经常需要使用CSS来设置文本的样式，包括字体、字号、字重、颜色以及文本的对齐方式。其中字体居中下面显示文字是一种比较实用的文本展示方式，下面我们通过CSS实现一下。 首先，我们需要在HTML中添加以下内容来展示一个文本框和一个按钮：

    <div class="container">
        <textarea class="input" placeholder="请输入文字"></textarea>
        <button class="btn">确认</button>
    </div>

这里我们使用了一个div容器来包含输入框和按钮。接着，我们需要在CSS中设置这些元素的样式。

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    .input {
        width: 50%;
        height: 200px;
        font-size: 24px;
        text-align: center;
    }

    .btn {
        font-size: 24px;
        padding: 10px 20px;
        background-color: #3498db;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

在这里，我们使用了flex布局将容器内容居中对齐，并设置了输入框的宽度、高度和字体大小，并将文本居中对齐。按钮使用了相应的颜色样式和点击效果。 最后，我们可以使用下面的代码将文本框下方显示输入的内容：

    .output {
        font-size: 24px;
        text-align: center;
        margin-top: 20px;
    }

我们在HTML中添加一个div容器来展示输出内容，并使用CSS设置大小、字体大小、文本居中对齐和上边距。 通过上面的代码设置，页面可以完美地展现出字体居中下面显示文字的效果。如果您有其他的CSS文本样式需求，也可以参照上面的设置方法进行调整。