这里的方法和第二种一致，方便用来对系统后台进行布局
#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-input v-model="input" placeholder="请输入内容" style="width: 250px" ></el-input> </td> </tr> <tr> <td width='100'>密 码：</td> <td width='300'> <el-input v-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>
