我们经常会让元素进行上下左右的居中,这里提供几种方法供大家使用
我们经常会让元素进行上下左右的居中,这里提供几种方法供大家使用。
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-items
和justify-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 种方案适用的比较多。