本文详细介绍了在前端开发中如何实现盒子的水平居中以及文字的水平居中。通过三种不同的定位方法和使用flex布局，可以灵活地达到盒子的居中效果。同时，通过设置line-height和text-align属性，可以轻松实现文字在已知高度下的水平居中。这些技巧对于优化网页布局至关重要。
盒子水品居中
定位三种
1.不知大盒子宽高 ，定位
2.已知大盒子宽高，定位
3.决定定位
flex布局
display: flex;
设置主轴排列方式 默认主轴为水平方向
justify-content: center;
设置侧轴，也就是垂直方向上的排列方式
align-items: center;
文字水品居中
已知高度
line-height: 100px;
设置文本的排列方式为center:居中 注: align:排列
text-align: center;
位置高度 控制父盒子，子盒子改变
line-height: 100px;
设置文本的排列方式为center:居中 注: align:排列
text-align: center;
人生自古谁无死，早死晚死都得死。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
