在编辑网页的过程中,经常需要将div框体居中.
记录两种让div框体相对父级框体居中(水平居中+垂直居中）的两种方法 :
先放上示范的HTML代码:
<body>
<div class="main">
<div class="target">
</div>
</div>
</body>在两种方法中,相同的部分是要将父级框体的position属性设置为relative。
.main{
position: relative;
}这是因为，操作居中目标框体时，要将其position属性设置为absolute。如果父级框体没有设置坐标系，则为默认坐标系，那绝对坐标系的目标框体将不能正确定位其位置。
接下来，对居中目标框体的操作有两种方法：
方法一：
设置绝对坐标系，然后设置top、left、right、bottom的值相等即可，不一定要都是0。并设置margin:auto;
.target{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}方法二:
设置绝对坐标系，让left和top都是50%,这样让目标div的最左边与父级框体的最左相距50%,垂直方向相同.然后再用transform:translate(-50%,-50%)将目标框体向左(上)平移自己宽度(高度)的50%.
.target{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}