目录
多种水平垂直居中方法
这里的方法和第二种一致，方便用来对系统后台进行布局
#admin {position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -200px;width: 400px;height: 300px;background: #fff;}
1.必需知道该div的宽度和高度，
2.然后设置位置为绝对位置，
3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，
4.最后将该div分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。
登录页面使用表格进行布局
<table><tr><td width='100'>用户名：</td><td width="300"><el-inputv-model="input"placeholder="请输入内容"style="width: 250px"></el-input></td></tr><tr><td width='100'>密 码：</td><td width='300'><el-inputv-model="input"placeholder="请输入内容"style="width: 250px;"></el-input></td></tr></table>
table{width: 350px;margin: auto;}td{letter-spacing:1px; text-align: right;}
多种水平垂直居中方法
当然居中的方式还有很多，下面是水平和垂直居中的一些写法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 第一种居中方式 *//* .pre{width: 500px;height: 500px;background-color: aqua;position: relative;}.child{width: 100px;height: 100px;background-color: black;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);} *//* 第二种方式 *//* .pre{width: 500px;height: 500px;background-color: aqua;position: relative;}.child{width: 100px;height: 100px;background-color: black;position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;} *//* 第三种方式flex居中 */.pre{width: 500px;height: 500px;background-color: aqua;display: flex;align-items: center;justify-content: center;}.child{width: 100px;height: 100px;background-color: black;}</style></head><body><div class="pre"><div class="child"></div></div></body></html>
