課程
/前端開(kāi)發(fā)
/HTML/CSS
/一課全面掌握主流CSS布局
老師可以補(bǔ)充一下在不知道父子元素寬高的情況下實(shí)現(xiàn)水平垂直居中的方法嗎
2019-11-05
源自:一課全面掌握主流CSS布局 2-8
正在回答
.parent{
????width:500px;
????height:500px;
????position:relative;
}
.child{
????width:100px;
????height:100px;
????position:absolute;
????left:0;
????right:0;
????top:0;
????bottom:0;
????margin:auto;
flex布局
.parent {
????display: flex;
????justify-content: center;
????align-items:center;
不知道寬高的情況下,就使用absolute + transform方案就可以,這種方案在項(xiàng)目中使用非常普遍
舉報(bào)
一網(wǎng)打盡CSS主流布局方案,一步掌握頁(yè)面布局技巧.
1 回答水平和垂直居中為啥沒(méi)說(shuō)直接用display:flex實(shí)現(xiàn)
3 回答display: table-cell; text-align: center;為啥不能實(shí)現(xiàn)水平居中
6 回答table-cell實(shí)現(xiàn)垂直居中還有一個(gè)比較大的缺點(diǎn)
3 回答是實(shí)現(xiàn)的水平居中,但是我想呈現(xiàn)全屏居中時(shí),在父級(jí)元素上把width1000px,改成100%,寬度就完全失效了
1 回答三種水平布局的課堂筆記:https://juejin.im/post/5dc76907f265da4d4434b39d
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2020-09-07
.parent{
????width:500px;
????height:500px;
????position:relative;
}
.child{
????width:100px;
????height:100px;
????position:absolute;
????left:0;
????right:0;
????top:0;
????bottom:0;
????margin:auto;
}
2019-11-20
flex布局
.parent {
????display: flex;
????justify-content: center;
????align-items:center;
}
2019-11-06
不知道寬高的情況下,就使用absolute + transform方案就可以,這種方案在項(xiàng)目中使用非常普遍