Html Can'；t在div中居中放置段落

我曾尝试使用flexbox将两个按钮和一个

p

居中，但我遇到了一些问题

我有这个密码

.container{
背景：rgb（255126,50,0.15）；
填充：02rem；
边界半径：0.375雷姆；
保证金：3.625雷姆1.25雷姆2雷姆1.25雷姆；
背景：黑色；
}
.布局{
高度：计算（100vh-4.5rem）；
背景：巴尔克；
}
.登录部分{
宽度：50vh；
保证金：0自动；
边框：1px实心#ffffff；
}
.登录部分p{
显示器：flex；
对齐项目：居中；
利润率：16px0；
文本对齐：居中；
宽度：12雷姆；
边框：1px实心#ffffff；
}
.btn登录{
高度：1.25雷姆；
显示器：flex；
颜色：rgba（255，255，255，0.54）；
文字装饰：无；
对齐项目：居中；
宽度：12雷姆；
保证金：0自动；
边框：1px实心#ffffff；
填充：1雷姆1.25雷姆；
线高：1rem；
边界半径：0.375雷姆；
字号：1rem；
}
.btn登录img{
右边距：1rem；
}
.btn继续{
高度：1.25雷姆；
显示器：flex；
颜色：rgba（255，255，255，0.54）；
文字装饰：无；
对齐项目：居中；
宽度：12雷姆；
保证金：0自动；
边框：1px实心#ffffff；
填充：1雷姆1.25雷姆；
线高：1rem；
边界半径：0.375雷姆；
字号：1rem；
}

登录
输入您的电子邮件

继续

.container{
背景：rgb（255126,50,0.15）；
填充：02rem；
边界半径：0.375雷姆；
保证金：3.625雷姆1.25雷姆2雷姆1.25雷姆；
背景：黑色；
}
.布局{
高度：计算（100vh-4.5rem）；
背景：巴尔克；
}
.登录部分{
宽度：50vh；
保证金：0自动；
边框：1px实心#ffffff；
}
.布局图p{
文本对齐：居中；
宽度：12雷姆；
边框：1px实心#ffffff；
颜色：白色；
保证金：自动；
}
.btn登录{
高度：1.25雷姆；
显示器：flex；
颜色：rgba（255，255，255，0.54）；
文字装饰：无；
对齐项目：居中；
宽度：12雷姆；
保证金：0自动；
边框：1px实心#ffffff；
填充：1雷姆1.25雷姆；
线高：1rem；
边界半径：0.375雷姆；
字号：1rem；
}
.btn登录img{
右边距：1rem；
}
.btn继续{
高度：1.25雷姆；
显示器：flex；
颜色：rgba（255，255，255，0.54）；
文字装饰：无；
对齐项目：居中；
宽度：12雷姆；
保证金：0自动；
边框：1px实心#ffffff；
填充：1雷姆1.25雷姆；
线高：1rem；
边界半径：0.375雷姆；
字号：1rem；
}

登录
输入您的电子邮件

继续

Flexbox通常通过在父容器上设置flex属性来使用，以影响容器中子容器的布局

当父级

.loginSection

上应设置flex属性时，您似乎在

.loginSection p

元素上添加

display:flex

和

align items:center

如果您的目的是将

.loginSection

中的所有元素水平居中，则可以去掉子项上的flex属性，并添加以下规则：

.loginSection {
  display: flex;
  flex-direction: column;
  justify-content: center;

  // ... other styles here
}

---

您需要将带有

flex-direction:column

和

align items:center

的

display:flex

添加到

.loginSection

容器中

通常，在使用flex时，您会调整容器，然后子容器会变成“flex项目”，而不是调整项目本身

.login节{
保证金：0自动；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
.login节p{text align:center；}

登录
输入您的电子邮件

继续

如上所述，问题在于不正确使用

flexbox

。我对你的代码进行了一点重构，我想这就是你想要实现的？