怎么把html中的文字放在中间位置,html如何使文字在指定位置

元素，添加行高后，文字的位置就从左边变成右边的，实现了垂直居中。

html

css

#div{ height:50px; line-height:50px; }

二、line-height vertical-align。

适用场景：图片垂直居中。

给父元素添加line-height,给图片元素加上vertical-align: middle。

#div { line-height: 200px; } #img { vertical-align: middle; }

三、绝对定位 transform法。

适用场景：居中元素能被撑开有高度即可使用。

html

css

#div { position:relative; } #block { positopn:absolute; top:50%; transform: translateY(-50%) }四、表格法。

适用场景：多行文字垂直居中，或者将块元素转成行内元素也可使用。

vertical-align只对table-cell以及inline-element起作用，vertical-align的值是相对于其父元素的，父元素必须是行内元素。如果想用于块元素，我们可以将父元素转化为table，这样就能使用此方法。

多行文字居中

// html

// css #div{ display: table; } #span { display: table-cell; vertical-align: middle; }

块元素居中

#div { display: table; } #block { display: table-cell; vertical-align: middle; }五、绝对定位 负边距法。

适用场景：这种方法适用于块级元素，需要设置元素的高度。也就是设置子元素距离父元素顶部50%，然后通过margin把子元素向上移动自身高度的一半。

html

css

#div { position:relative; } #block { positopn:absolute; top: 50%; left: 50%; height: 30%; width: 40%; margin: -15% 0 0 -20%; }六、弹性盒子法。

适用场景：都可以使用。

html

css有两种写法：

// 方法一： #div { display:flex; align-item:column; } // 方法二： #div { display:flex; flex-direction:column; // 改变主轴方向 justify-content:center; // 定义主轴的对齐方式 }七、绝对定位 margin:auto

适用场景：块级元素垂直居中。

把要垂直居中的元素相对于父元素绝对定位，top和bottom设置为相等的值，我这里设置成0了。再将要居中的元素的margin设为auto，这样就可以实现垂直居中了。

html

css

#div { position:relative; } #block { positopn:absolute; top:0; bottom:0; margin:auto 0; }八、padding。

适用场景：须知父元素的高度和子元素的高度。如果指定父元素高度为300px，子元素高度为100px，要实现垂直居中需要设置父元素的上下padding为100px。

html

css

#div { padding: 100px 0; }

---

喜欢的话，欢迎点赞收藏！