如何在 div 中水平和垂直对齐 Angular 组件

Posted 2023-03-05

【中文标题】如何在 div 中水平和垂直对齐 Angular 组件

【英文标题】：How to align an Angular component horizontally and vertically in a div

【发布时间】：2021-09-23 14:46:30

【问题描述】：

请问我可以就以下问题寻求帮助：

我有以下 html 来制作全屏棕色 DIV：

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: brown;">
<app-text-cloner style="display: flex; justify-content:center; align-items:center;"></app-text-cloner>

app-text-cloner 的 HTML 是：

<input type="text" id="text1" name="text1" spellcheck="false" [(ngModel)]="m_text1">

我希望这会产生垂直和水平居中的结果，而不是仅水平居中：

感谢您的帮助...

【问题讨论】：

尝试给 div 的高度为 100vh

【参考方案1】：

在这种情况下，我认为您需要在容器中设置一个完整的高度，即height: 100%;。试试看：

<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: brown;">
<app-text-cloner style="display: flex; height:100%; justify-content:center; align-items:center;"></app-text-cloner>