div內(nèi)的div水平垂直居中方式
標(biāo)簽：
JavaScript
第一种情况：不确定宽高
在父级元素用padding确定上下居中
在子级元素用margin确定左右居中
.dad { border: 1px solid; padding: 100px 0;
}.son { border: 5px solid red; width: 100px; margin: 0 auto;
}第二种情况：div的高度确定（全屏情况）
方法一：子级元素高度要确定的情况
用
position:absolute配合margin: auto来实现。
body { margin: 0;
}.dad { border: 1px solid; height: 100vh; box-sizing: border-box;
}.son { border: 5px solid red; width: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 100px;
}方法二：子级元素宽度和高度都可以不确定的情况
在父级元素添加下面代码
display: flex; justify-content: center; align-items: center;
代码展示：http://js.jirengu.com/xabiwesali/1/edit
tips:如何实现一比一的自适应div?
用
padding-top: 100%;
作者：徐金俊
链接：https://www.jianshu.com/p/3cbd9b7cca69
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦