HTML技巧篇：实现元素水平与垂直居中的几种方式

如何使用html+css实现元素的水平与垂直居中效果，这也是咱们网页在编码制做中会常常用到的问题。

1）单行文本的居中

主要实现css代码：

水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/

咱们先来看这样一个例子，加入咱们这里有一个div，宽度和高度为300px，背景颜色为黑色，而后在div中有一行简短文字，咱们只须要使用line-height:200px;就能够实现文字的居中效果，具体的代码以下所示：

由上图能够看出咱们实现了单行文字的垂直居中效果，可是不少时候咱们的文字并不知道具体有多少，可能有一行，也可能有不少行，那么遇到多行文字的这种问题咱们要如何处理呢。

2）多行文本的垂直居中

对于多行文本的垂直居中咱们有不少种实现方式，咱们这里逐个的来看一下；

一、使用display:table来实现

主要实现代码：

display: table使块状元素成为一个块级表格;

display: table-cell;子元素设置成表格单元格;

vertical-align: middle;使表格内容居中显示，便可实现垂直居中的效果;

具体的html与css的代码就以下所示：

二、使用absolute与transform配合实现

主要实现代码：

position:absolute; 首先给文本绝对定位；

left:50%;top:50%;transform:translate(-50%,-50%); 让文本距离盒子左边和上边分别为50%，再用transform向左（上）平移它本身宽度（高度）的50%，也就达到居中效果了。

具体的html与css的代码就以下所示：

三、使用flex实现

主要实现代码：

display: flex;设置 display 属性的值为 flex 将其定义为弹性容器

align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中

justify-content: center; 定义了项目在主轴上的对齐方式，水平对齐居中

具体的html与css的代码就以下所示：

好了，本篇文章就给你们说到这里，你们本身动手写一下看能不能写出同样的页面效果出来，也能够找一些相似的页面本身练习一下。

转载自：https://baijiahao.baidu.com/s?id=1622460301039180175&wfr=spider&for=pc