css水平垂直居中的命令

要让一个元素在其父元素中水平垂直居中，可以使用以下 CSS 命令：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

这个命令会将元素的左上角放置在其父元素的中心位置。其中，`position: absolute;` 会使元素脱离文档流，`top: 50%;` 和 `left: 50%;` 会将元素的中心点定位在其父元素的中心位置，`transform: translate(-50%, -50%);` 会将元素自身的中心点移动到其父元素的中心位置。

相关问题

如何使用element-ui将div居中

您可以使用以下步骤将 `div` 元素居中显示：

1. 首先，确保您已经安装了 Element UI 库。可以使用以下命令来安装：

npm install element-ui

2. 在您的项目中导入 Element UI 的样式文件和库：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 使用 Element UI 的布局组件来将 `div` 元素居中。您可以使用 `el-row` 和 `el-col` 组件来实现：

<template>
  <el-row type="flex" justify="center" align="middle">
    <el-col :span="12">
      <div class="centered-div">
        <!-- 在这里放置您的内容 -->
      </div>
    </el-col>
  </el-row>
</template>

<style>
.centered-div {
  text-align: center;
}
</style>

在上面的示例中，`el-row` 组件被设置为 `type="flex"`，以便其子元素可以通过设置 `justify="center"` 和 `align="middle"` 来水平和垂直居中显示。

4. 最后，您可以自定义 `centered-div` 类的样式来使内容水平居中。

这样，您的 `div` 元素就会在页面中居中显示了。

命令按钮和重置按钮的样式：边界(上下10px、左右自动)，宽度150px，高度35px，背景#44A1FF，颜色为白色， 填充(上下为0、左右为20px)。

你可以使用下面的 CSS 样式来设置命令按钮和重置按钮的样式：

button[type="submit"], button[type="reset"] {
  border: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  height: 35px;
  background-color: #44A1FF;
  color: white;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
}

这将使 `type` 属性为 `submit` 或 `reset` 的按钮具有以下样式：

- 上下边距为 10 像素
- 左右边距自动计算，使元素水平居中
- 宽度为 150 像素
- 高度为 35 像素
- 背景颜色为 `#44A1FF`
- 文字颜色为白色
- 水平内边距为 20 像素，垂直内边距为 0

你可以根据需要调整这些值来满足你的需求。