日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

國內最全IT社區平臺 聯系我們 | 收藏本站
阿里云優惠2
您當前位置：首頁 > web前端 > htmlcss > Div 內容垂直居中

Div 內容垂直居中

來源：程序員人生   發布時間：2015-05-19 08:26:05 閱讀次數：4033次


感覺 CSS 有很多可以hack 的，好玩的地方。

想了1個簡單的，詭異的辦法，讓Div 中想展現的內容垂直居中。

而不去使用 flexbox, JS, Less, Scss, rotate, before, after。

可以在 container 頭部塞1個與“內容區域”1樣大小的 div，然后設置“內容區域”的 bottom 為父親的 50%，

最后計算下，會發現“內容區域”上下距離相等。


<html> <head> <style type="text/css"> #container { position: relative; left: 200px; top: 100px; width: 100px; height: 400px; background-color: #7873fa; } #offset-head { height: 50px; } #offset-body { width: 100px; height: 350px; position: relative; } #show { width: 100px; height: 50px; background-color: #ffbc3e; position: absolute; bottom: 50%; } </style> </head> <body> <div id="container"> <div id="offset-head"></div> <div id="offset-body"> <div id="show"></div> </div> </div> </body> </html>


效果圖：


不過代碼產生改動的時候，比如：

將黃色 (show ) 變高時，需調劑offset-head 的height，使show 與offset-head 二者的height1樣高。

改動 container 的height 時，需將offset-body 的height 改成container.height - offset-head.height


生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生
------分隔線----------------------------
分享到:
------分隔線----------------------------
為碼而活
積分：4237
15粉絲
7關注
欄目熱點
關閉
程序員人生
主站蜘蛛池模板： av网址观看 | 激情综合五月 | 日韩aa | 国产精品久久久久国产a级 亚洲天堂偷拍 | 国产伦精品一区二区三区在线 | 国产欧美综合一区二区三区 | 日本不卡高清视频 | 久久久精品一区二区三区 | 日韩视频在线观看 | 色综合第一页 | 成人激情视频在线观看 | 成人黄色小视频 | 久久91精品国产 | 国产成人在线看 | 久久99成人 | 欧美视频一区 | 91精品国产99久久久久久红楼 | 91丨九色丨国产在线 | www日韩在线 | 成人91在线 | 国产精品一区二区久久 | 九九热精品视频 | 美女一区 | 韩国三级av | 久久久久高清 | 国产小视频在线 | 午夜欧美一区二区三区在线播放 | 国产成人av一区二区三区 | 国产成人午夜视频 | 久久99精品久久久久久青青日本 | 蜜桃永久免费 | 一级黄视频 | 久久精品国产亚洲一区二区三区 | 欧美激情亚洲 | 欧美香蕉| 国产婷婷色一区二区三区 | 日本成人中文字幕 | 嫩草影院在线观看91麻豆 | 午夜久久久久 | 99精品视频免费观看 | 久久久国产精品免费 |