HTML技巧篇：实现元素⽔平与垂直居中的⼏种⽅式
如何使⽤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使块状元素成为⼀个块级表格;css设置文字垂直居中
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的代码就如下所⽰：
好了，本篇⽂章就给⼤家说到这⾥，⼤家⾃⼰动⼿写⼀下看能不能写出⼀样的页⾯效果出来，也可以⼀些类似的页⾯⾃⼰练习⼀下。
转载⾃：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。