div嵌套div的居中问题
生活随笔
收集整理的這篇文章主要介紹了
div嵌套div的居中问题
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
????div嵌套div，我們經(jīng)常都用。布局是基礎(chǔ)，扎實(shí)的基礎(chǔ)會讓你在解決問題的時(shí)候更柔韻有余。這是我出來工作之后深深的領(lǐng)悟。下面是我對外層布局的一些小總結(jié)。
<!DOCTYPE HTML> <html> <head> <title>div嵌套div居中問題</title><meta http-equiv="content-type"content="text/html; charset=UTF-8"/><style type="text/css">.BD-one{width:200px;height:200px;background-color:red;}.content-one{width:40px;height:40px;background-color:yellow;margin:0 auto; /* 這是最經(jīng)常用到的 */}.BD-two{width:200px;height:200px;background-color:green;/* 這里的 父容器需要有position的設(shè)置，無論是relative 還是 absolute */position:relative;}.content-two{width:60px;height:40px;background-color:yellow;position:absolute;/* 這里的 top left：50%都是相對于父容器的 */top:50%;left:50%;/* 這里的 margin-top margin-left:-20px都是相對于自己的。設(shè)置不同的值查看效果 */margin-top:-20px; /* 40/20 */margin-left:-30px; /* 60/20 */}.BD-three{/* 最外層 用百分比 就不行了 *//* 如這里width:100%; height:100% */width:900px;height:300px;background-color:blue;}.BFB{/* 父容器用%也是可以的 */width:20%;height:20%;background-color:red;/* 這里的 父容器需要有position的設(shè)置，無論是relative 還是 absolute */position:relative;}.content-three{width:40px;height:40px;background-color:yellow;position:absolute;/* 這里的 top left：50%都是相對于父容器的 */top:50%;left:50%;/* 這里的 margin-top margin-left:-20px都是相對于自己的 */margin-top:-20px;margin-left:-20px;</style> </head> <body><span>這里針對的是靜態(tài)的HTML元素</span><span>如果是動態(tài)生成的元素，JS會更好</span><span>左右居中</span><div class="BD-one"><div class="content-one"></div></div><br/><span>上下左右居中</span><div class="BD-two"><div class="content-two"></div></div><span>上下左右居中,父容器采用%的情況</span><div class="BD-three"><div class="BFB"><div class="content-three"></div></div></div> </body> </html>才疏學(xué)淺，如有建議或者意見，望留言指正。
(●'?'●)
轉(zhuǎn)載于:https://my.oschina.net/u/2870138/blog/782529
總結(jié)
以上是生活随笔為你收集整理的div嵌套div的居中问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： UVA 253 Cube paintin
- 下一篇： nginx 安装与配置