1. 首頁 > 生活 > >

html文字居中代碼怎么寫 html5居中代碼怎么寫

小知識



文章插圖
html文字居中代碼怎么寫 html5居中代碼怎么寫

文章插圖

這個問題好像面試必問的！以前我問時不時會問一下，基礎的給分題 。
方法1、定位
盒子寬高已知，
position: absolute;
left: 50%;
top: 50%;
margin-left:-自身一半寬度;
margin-top: -自身一半高度;
方法2、table-cell布局
父級 display: table-cell; vertical-align: middle;
子級 margin: 0 auto;
方法3、定位 + transform ;
適用于 子盒子 寬高不定時； （常用方法）
position: relative / absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
注意這里啟動了3D硬件加速哦 會增加耗電
方法4、flex 布局
父級：
【html文字居中代碼怎么寫 html5居中代碼怎么寫】display: flex;
align-items: center;/*垂直居中*/
justify-content: center;/*水平居中*/
感謝收看本期Q程序員說，最后別忘點贊加關注哈！有問題可留言討論 。