文字与元素居中的方式

蚊子前端博客
发布于 2019-10-15 21:26
我们经常会让元素进行上下左右的居中,这里提供几种方法供大家使用

我们经常会让元素进行上下左右的居中,这里提供几种方法供大家使用。

1. 绝对定位与 margin

当我们提前知道要居中元素的长度和宽度时,可以使用这种方式:

COPYCSS

.container { position: relative; width: 300px; height: 200px; border: 1px solid #333333; } .content { background-color: #ccc; width: 160px; height: 100px; position: absolute; top: 50%; left: 50%; margin-left: -80px; /* 宽度的一半 */ margin-top: -50px; /* 高度的一半 */ }

absolute与margin的居中布局

2. 绝对定位与 transform

当要居中的元素不定宽和定高时,我们可以使用transform来让元素进行偏移。

COPYCSS

.container { position: relative; width: 300px; height: 200px; border: 1px solid #333333; } .content { background-color: #ccc; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); text-align: center; }

transform的居中布局

蚊子的博客

3. line-height

line-height其实是行高,我们可以用行高来调整布局!

不过这个方案有一个比较大的缺点是:文案必须是单行的,多行的话,设置的行高就会有问题。

COPYCSS

.container { width: 300px; height: 200px; border: 1px solid #333333; } .content { line-height: 200px; }

line-height的居中布局

4. table 布局

给容器元素设置display: table,当前元素设置display: table-cell

COPYCSS

.container { width: 300px; height: 200px; border: 1px solid #333333; display: table; } .content { display: table-cell; vertical-align: middle; text-align: center; }

line-height的居中布局

蚊子的博客

5. flex 布局

我们可以给父级元素设置为display: flex,利用 flex 中的align-itemsjustify-content设置垂直方向和水平方向的居中。这种方式也不限制中间元素的宽度和高度。

同时,flex 布局也能替换line-height方案在某些 Android 机型中文字不居中的问题。

COPYCSS

.container { width: 300px; height: 200px; border: 1px solid #333333; display: flex; align-items: center; justify-content: center; } .content { background-color: #ccc; text-align: center; }

flex的居中布局

蚊子的博客

6. 总结

每种上下左右居中的方案都有不同的适用场景,现在通常是第 2 种方案和第 5 种方案适用的比较多。

标签:
阅读(486)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆