想要怎么样的居中?
1 水平居中
inline的元素水平居中
css{
text-align:center;
};
block的元素水平居中
css{
margin:0 auto;
};
2 垂直居中
inline水平/如文本的元素水平居中
1 单行文本垂直居中
父元素盒子高度=行高
2 多行文本垂直居中
表格中的单元格文本默认垂直居中
使用flexbox flex-direction: column;
使用vertical-align;
justify-content: center;
block的元素水平居中
1 已知元素高度
使用绝对定位的方式+负的margin值
2 未知元素高度
使用绝对定位的方式+transform: translateY(-50%);
3 使用flexbox
3 水平垂直居中
1:已知宽高
使用绝对定位的方式+负的margin值
2:未知宽高
使用绝对定位的方式+transform:translate(-50%,-50%);
3:使用flexbox
.parent {
display: flex;
justify-content: center;
align-items: center;
}
點(diǎn)擊查看更多內(nèi)容
38人點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦