例子1:外层div为相对定位,里层div为绝对定位,设置里层div左右垂直居中于外层div
以上代码可以将子div在父div中水平垂直居中对齐,下面就简单介绍一下几个要点:
1.父元素是使用相对定位,这样子元素就可以以它作为位移参考对象。
2.top属性值计算方式:父元素的高度/2-子元素高度/2,
left属性值计算方式:父元素宽度值/2-子元素宽度值/2。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8" />
<title>蚂蚁部落</title>
<style type="text/css">
.father {
width: 600px;
height: 600px;
background-color: green;
margin: 0px auto;
position: relative;
}