【个人笔记重点,不作为参考】主题:css垂直居中demo

2017-10-17 19:28:36来源:CSDN作者:qq_37146850人点击

分享
1.table.cell2.absolute.margin auto3.line-height4.absolute. margin - 5.padding:6.1/2 div sesize
<!DOCTYPE html>
<html><head><title>vertical center</title><style type="text/css">*{margin: 0;padding:0;}div{font-size: 0px}img{width: 30px;}.wrap{border: 10px solid black;margin: 0 auto;width: 500px;}.wrap section {border: 2px solid blue;margin: 0px auto;}.wrap section>div{border: 1px solid red}.wrap1{display: table;height: 50px;}.wrap1>div{font-size: 0px;display: table-cell;vertical-align: middle;/*display:inline-block;*/}.wrap1 img{border: 1px solid red}.wrap2{position: relative;height:100px;}.wrap2>div{position: absolute;left: 0;top:0;bottom: 0;right:0;margin:auto;height: 50px;width:50px;}.wrap3{text-align: center;}.wrap3>div{line-height: 50px;font-size: 0px}.wrap3 img{vertical-align: middle;}.wrap4>div{position: relative;height: 100px}.wrap4>div>div{border: 1px solid red;position: absolute;top: 50%;left:50%;width: 50px;height:50px;margin: -25px 0 0 -25px}.wrap5>div{padding: 5% 0;}.wrap5>div>div{padding: 10% 0;border:1px solid red;text-align: center;}.wrap6{height: 200px;}.wrap6>div.sesize{width: 100%;height: 50%;float: left;margin-bottom: -50px;border:1px solid yellow;}.wrap6>div.child{width: 100%;height: 100px;clear: both;}</style></head><body>1.table.cell2.absolute.margin auto3.line-height4.absolute. margin - 5.padding:6.1/2 div sesize<div class="wrap"><section class="wrap1"><div><img src="./img/1.jpg"></div></section><section class="wrap2"><div></div></section><section class="wrap3"><div><img src="./img/1.jpg"> </div></section><section class="wrap4"><div><div></div></div></section><section class="wrap5"><div><div><img src="./img/1.jpg"></div></div></section><section class="wrap6"><div class="sesize"></div><div class="child">hello world!</div></section><div6</bo6y></ht6l>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台