,可以通过以下步骤实现:
<div class="container">
<button class="centered-button">按钮</button>
<p class="centered-text">其他居中文本</p>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh; /* 设置Div高度为视口高度,使其居中显示 */
}
.centered-button {
margin-bottom: 10px; /* 设置按钮与文本之间的间距 */
}
.centered-text {
text-align: center;
}
解释:
display: flex;
将Div元素设置为弹性布局,使其内部元素可以方便地进行居中操作。flex-direction: column;
将内部元素垂直排列。align-items: center;
和justify-content: center;
将内部元素在水平和垂直方向上居中对齐。height: 100vh;
将Div元素的高度设置为视口高度,使其垂直居中显示。margin-bottom: 10px;
为按钮设置底部间距,使其与文本之间有一定的间隔。text-align: center;
将文本内容水平居中对齐。推荐的腾讯云相关产品和产品介绍链接地址: