display: flex 上下左右居中

要将一个元素在上下左右居中，可以使用`display: flex`以及其他相关属性。下面是一种实现方式：
首先，将外层的div元素设置为flex布局，可以通过设置以下样式来实现：

.login {
  display: flex;
  justify-content: center;
  align-items: center;
}

这样就可以实现元素在水平和垂直方向上居中对齐了。
如果需要将子元素在垂直方向上居中，可以设置`flex-direction: column`属性，将元素在纵向上排列，然后使用`align-items: center`将子元素在纵向上居中对齐。
如果需要调整子元素与边界的距离，可以通过设置子元素的`margin-top`或`margin-bottom`属性来实现。例如，可以给下面的子元素设置`margin-top`属性来调整与上边界的距离：

.login-form {
  margin-top: 100px;
}

这样就可以将子元素与上边界保持100像素的距离。

相关问题

display: flex; 垂直居中

以下是使用display: flex;实现垂直居中的方法：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px; /* 设置容器高度 */
}

这里的.container是一个包含需要垂直居中的元素的父容器。通过设置display: flex;将父容器变为弹性容器，然后使用justify-content: center;将子元素水平居中，使用align-items: center;将子元素垂直居中。最后，通过设置容器的高度来控制垂直居中的效果。

display:flex属性水平居中

要使display:flex属性水平居中，你可以使用justify-content: center;属性。这将使flex容器中的子元素在水平方向上居中对齐。另外，你还可以使用align-items: center;属性来使子元素在垂直方向上居中对齐。如果你想要调整子元素之间的距离，你可以使用margin属性来设置子元素的外边距。另外，如果你想要调整子元素在容器中的位置，你可以使用align-content属性来控制元素的堆叠位置，例如align-content: flex-start;可以使元素位于容器的开头。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [display:flex 元素垂直居中，有间距，右对齐，gap属性](https://blog.csdn.net/xutongbao/article/details/119994687)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [css使用flexbox布局容器内多元素水平居中](https://download.csdn.net/download/weixin_38703968/13672753)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [css display:flex 属性](https://blog.csdn.net/qq_40716795/article/details/114028424)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]