css 中不定寬高的元素居中布局如何解決?很多新手對此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
創(chuàng)新互聯(lián)-云計(jì)算及IDC服務(wù)提供商,涵蓋公有云、IDC機(jī)房租用、西部信息機(jī)房、等保安全、私有云建設(shè)等企業(yè)級互聯(lián)網(wǎng)基礎(chǔ)服務(wù),聯(lián)系電話:18980820575
1. 水平居中
公共代碼:
html:
<div class="parent"> parent <br> <div class="child"> child </div> </div>
css:
html, body { margin: 0; width: 100%; height: 100%; .parent { width: 100%; height: 100%; background: #fac3fa; .child { width: 50%; height: 50%; background: #fe9d38; } } }
方案一: text-align(父) + inline-block(子)
代碼:
css:
.parent { text-align: center; .child { display: inline-block; } }
方案二: 塊級元素 + margin: 0 auto;
.child { display: block; // 非塊級元素時(shí)設(shè)置 margin: 0 auto; }
方案三: absolute + transform
.parent { position: absolute; left: 50%; transform: translateX(-50%); }
方案四: flex
注: 由于使用flex的關(guān)系, 這里去掉了 parent 和<br>
.parent { display: flex; justify-content: center; }
2. 垂直居中
公共代碼:
html:
<div class="parent"> <div class="child"></div> </div>
css:
html, body { margin: 0; width: 100%; height: 100%; } .parent { display: table-cell; width: 800px; height: 500px; background: #fac3fa; .child { width: 50%; height: 50%; background: #fe9d38; } }
方案一: table-cell(父) + vertical-align(子)
.parent { display: table-cell; vertical-align: middle; }
方案二: absolute + transform
.parent { position: relative; .child { position: absolute; top: 50%; transform: translateY(-50%); } }
方案三: flex
.parent { display: flex; align-items: center; }
3. 水平垂直居中
公共代碼同[垂直居中]
常用方案一: absolute + transform
.parent { position: relative; .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } }
常用方案二: flex
.parent { display: flex; align-items: center; justify-content: center; }
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)的支持。
網(wǎng)頁題目:css中不定寬高的元素居中布局如何解決
轉(zhuǎn)載來源:http://muchs.cn/article10/pgoedo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、網(wǎng)站設(shè)計(jì)、微信公眾號、網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)