div水平垂直居中
在写前端页面时,常常需要居中一个块级元素,如div的居中。水平居中只需margin:auto;一行代码即可,那么,如何才能使得div在父块级元素中同时水平、垂直居中呢?
开始之前,大家应该充分理解css中绝对定位和相对定位的概念
这篇博文写得非常好:CSS相对定位和绝对定位详解
在此补充一下,当div使用绝对定位时(position:absolute),会往上查找祖先元素,直到某个祖先元素有position属性且值为relative或position,然后以祖先元素的左上角为基点,再设置top,right,bottom,left属性。具体解释可查看上面链接。
看下简陋的最终效果:
实现思路
1.使用绝对定位,相对对位功能,使得子div左上角的点位于父div的中心
2.使用transform属性使子div向左上角编译长宽一半的距离
实现代码及注释
<!DOCTYPE html>
<html>
<head>
<title>
div
</title>
<style type="text/css">
.div1 {
background-color: gray; /* 父div背景色 */
height: 500px;
width: 600px;
margin: auto;
position: relative;
}
.div2 {
background-color: red;
height: 200px;
width: 200px;
position: absolute; /* 当父div设置了相对对位后,这里再设置绝对定位,即可另子div相对于父div定位 */
top: 50%; /* top,left是与绝对定位配套的属性,以div左上角为动点,令它距离父div顶端和左端长度一半 */
left: 50%;
/**
专注于div2左上角的点,可看作以它为原点建立直角坐标系(x轴正方向向右,y轴正方向向下),
然后div2先向左移动自身宽度一半的距离(从-50%看出),再向上移动自身宽度一半的距离
*/
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</html>