实现元素水平与垂直居中的几种方式
如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题
1）单行文本的居中 主要实现css代码：
水平居中：text-align:center;
垂直居中：line-height:XXpx;
/line-height与元素的height的值一致/
我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有一行简短文字，我们只需使用line-height:200px;
就可以实现文字的居中效果，具体的代码如下所示：
文章图片
2）多行文本的垂直居中 对于多行文本的垂直居中我们有很多种实现方式，我们这里逐个的来看一下
1、使用display:table来实现
主要实现代码：
display: table使块状元素成为一个块级表格;
display: table-cell;
子元素设置成表格单元格;
vertical-align: middle;
使表格内容居中显示，即可实现垂直居中的效果;
具体的html与css的代码就如下所示：
文章图片
2、使用absolute与transform配合实现
主要实现代码：
position:absolute;
首先给文本绝对定位
left:50%;
top:50%;
transform:translate(-50%,-50%);
让文本距离盒子左边和上边分别为50%，再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了。
具体的html与css的代码就如下所示：
文章图片
3、使用flex实现
主要实现代码：
display: flex;
设置 display 属性的值为 flex 将其定义为弹性容器
align-items: center;
定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中
justify-content: center;
定义了项目在主轴上的对齐方式，水平对齐居中
【实现元素水平与垂直居中的几种方式】具体的html与css的代码就如下所示：
文章图片
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM