目录
这里的方法和第二种一致,方便用来对系统后台进行布局
#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>