1 关于css实现水平垂直居中的一些方法:
.css的定位:用margin,padding,position
position:absolute; //绝对定位,一般父级元素采用relative来配合使用,如果父级没有定位,将把body标签作为父级定位来使用
用position和margin的方法来实现两个div盒子的水平垂直居中:
html:
<body> <div class="parent"> <div class="children">这里是子盒子</div> </div> </body>
css:
<style> .parent{ background-color:aquamarine; width:300px; height:300px; position:relative; } .children{ background-color:yellow; width:100px; height:100px; position:absolute; top: 0%; right: 0%; bottom:0%; left:0%; margin:auto; } /* .children{ width:100px; height:100px; position:absolute; top:100px; left:100px; } */ </style>
效果:
.inline-height设置行高来实现垂直居中,text-align:center来设置水平居中
.parent{ background-color:aquamarine; width:300px; height:300px; text-align: center; } .children{ display:inline-block; line-height:300px; }
line-height:inherit; //规定从父元素那里继承line-height的值
margin:inherit; //规定从父元素那里继承margin的值
2 关于css层叠z-index的记录
z-index:属性在position(非stastic)中有效,数值可正可负,数值越大,离屏幕越近,比较要看它显示的不同的级别