掌握文本框居中对齐：简单技巧，轻松实现视觉平衡

在网页设计和文档排版中，文本框的居中对齐是一个常见且重要的技巧。正确的居中对齐不仅能够提升视觉效果，还能使内容更加易于阅读。以下是一些简单而实用的技巧，帮助您轻松实现文本框的居中对齐。
1. 使用CSS样式
CSS（层叠样式表）是网页设计中用于设置元素样式的一种语言。通过CSS，您可以轻松地对文本框进行居中对齐。
1.1 垂直居中
要使文本框在垂直方向上居中，可以使用
display: flex;
和
align-items: center;
样式。
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh; /* 使用视口高度，确保文本框始终居中 */
}

.text-box {
width: 50%; /* 设置文本框宽度 */
height: 200px; /* 设置文本框高度 */
background-color: #f0f0f0; /* 设置背景颜色 */
}
1.2 水平居中
要使文本框在水平方向上居中，可以使用
display: flex;
和
justify-content: center;
样式。
.container {
display: flex;
justify-content: center;
height: 100vh; /* 使用视口高度，确保文本框始终居中 */
}

.text-box {
width: 50%; /* 设置文本框宽度 */
height: 200px; /* 设置文本框高度 */
background-color: #f0f0f0; /* 设置背景颜色 */
}
2. 使用HTML标签
除了CSS，HTML标签本身也提供了一些居中对齐的属性。
2.1 使用