html中怎么垂直居中(实现元素水平与垂直居中的几种方式)(1)

本篇文章主要给大家介绍一下如何使用HTML css实现元素的水平与垂直居中效果,这也是我们网页在编码制作中会经常用到的问题。

1)单行文本的居中

主要实现css代码:

水平居中:text-align:center;

垂直居中:line-height:XXpx; /*line-height与元素的height的值一致*/

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

html中怎么垂直居中(实现元素水平与垂直居中的几种方式)(2)

html中怎么垂直居中(实现元素水平与垂直居中的几种方式)(3)

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

2)多行文本的垂直居中

对于多行文本的垂直居中我们有很多种实现方式,我们这里逐个的来看一下;

1、使用display:table来实现

主要实现代码:

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

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

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

具体的html与css的代码就如下所示:

html中怎么垂直居中(实现元素水平与垂直居中的几种方式)(4)

html中怎么垂直居中(实现元素水平与垂直居中的几种方式)(5)

2、使用absolute与transform配合实现

主要实现代码:

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

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

具体的html与css的代码就如下所示:

html中怎么垂直居中(实现元素水平与垂直居中的几种方式)(6)

3、使用flex实现

主要实现代码:

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

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

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

具体的html与css的代码就如下所示:

html中怎么垂直居中(实现元素水平与垂直居中的几种方式)(7)

好了,本篇文章就给大家说到这里,大家自己动手写一下看能不能写出一样的页面效果出来,也可以找一些类似的页面自己练习一下,有需要源码的可以直接私信【网站源码】即可。

每日金句:了解别人心里想什么,你才能得到自己想要的。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

,