垂直居中效果汇总
垂直居中是網站中一種常見的需求，常見的垂直居中效果和實現如下
1、具有固定寬高的div垂直居中
?
2、單行文本垂直居中
?
3、多行文本處置居中
?
4、圖片垂直居中
?
案例與實現方法前點擊鏈接：
http://www1.pconline.com.cn/magazine/20170220/test3.html
代碼如下
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>test</title><style>*{/*outline: 1px solid red;*/}body{text-align: center;}.div1{width: 200px;height: 200px;margin:auto;position: relative;border:1px solid green;}.div11{width: 100px;height: 100px;position: absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px;outline: 1px solid red;}.div2{width: 200px;height: 200px;border:1px solid blue;margin:auto;margin-top: 20px;text-align: center;}.span22{text-align: center;line-height: 200px;}.div3{width: 800px;height: 400px;margin:auto;border: 1px solid blue;margin-top: 20px;text-align: center;vertical-align: middle;}.div3 img{vertical-align: middle;}.span33{display: inline-block;width: 0px;height: 100%;vertical-align: middle;}.div4{width: 200px;height: 200px;margin:auto;border: 1px solid red;margin-top:20px;position: relative;}</style> </head> <body><h3>1、具有固定寬高的div垂直居中</h3><div class="div1"><div class="div11">div11</div></div><h3>2、單行文本垂直居中</h3><div class="div2"><span class="span22">hello world</span></div><h3>3、多行文本處置居中</h3><div class="div4"><div class="div44">hello helo heloo heloo woe o egaghrbqrb naobjo bnorebjoqr bneojb beorb oqer nojoqfjobq</div></div><script>var div44 = document.querySelector(".div44");div44W = div44.offsetWidth;div44H = div44.offsetHeight;div44.style.marginLeft=(div44.parentNode.offsetWidth-div44W)/2+"px"; div44.style.marginTop =(div44.parentNode.offsetHeight-div44H)/2+"px";</script><h3>4、圖片垂直居中</h3><div class="div3"><span class="span33"></span><img src="a.jpg" alt=""></div> </body> </html>?
?
轉載于:https://www.cnblogs.com/gg1234/p/6419902.html
總結
- 上一篇： 负数赋值给无符号数的陷阱【转】
- 下一篇： 【BZOJ4069】【APIO2015】