1)单行文本的居中
主要实现css代码:
水平居中:text-align:center;
垂直居中:line-height:XXpx; /*line-height与元素的height的值一致*/
s
2) 多行文本的垂直居中我们有很多种实现方式
1)使用display:table来实现
主要实现代码:
display: table使块状元素成为一个块级表格;
display: table-cell;子元素设置成表格单元格;
vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果;
2) 使用absolute与transform配合实现
主要实现代码:
position:absolute; 首先给文本绝对定位;
left:50%;top:50%;transform:translate(-50%,-50%); 让文本距离盒子左边和上边分别为50%,再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了.
3)使用flex实现
主要实现代码:
display: flex;设置 display 属性的值为 flex 将其定义为弹性容器
align-items: center;定义项目在交叉轴(纵轴)上如何对齐,垂直对齐居中
justify-content: center; 定义了项目在主轴上的对齐方式,水平对齐居中
4)使用 position 定位
- 将父元素设置为 positon:fixed,然后上下左右都为 0;使其填满整个屏幕;
- 子元素也设置为 positon:fixed,然后上下左右都为 0;margin 设置为 auto,实现水平垂直居中。
5)grid 布局
欢迎大家多多补充哦