課程
/前端開發(fā)
/HTML/CSS
/一課全面掌握主流CSS布局
老師可以補充一下在不知道父子元素寬高的情況下實現水平垂直居中的方法嗎
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方案就可以,這種方案在項目中使用非常普遍
舉報
一網打盡CSS主流布局方案,一步掌握頁面布局技巧.
1 回答水平和垂直居中為啥沒說直接用display:flex實現
3 回答display: table-cell; text-align: center;為啥不能實現水平居中
6 回答table-cell實現垂直居中還有一個比較大的缺點
3 回答是實現的水平居中,但是我想呈現全屏居中時,在父級元素上把width1000px,改成100%,寬度就完全失效了
1 回答三種水平布局的課堂筆記:https://juejin.im/post/5dc76907f265da4d4434b39d
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優(yōu)惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
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方案就可以,這種方案在項目中使用非常普遍