集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都前端开发HTML技巧:实现元素水平与垂直居中的几种方式

发布者: 成都达内     浏览次数:     发布时间:2019-06-26 11:43:02

如何使用html+css实现元素的水平与垂直居中效果,这也是我们网页在编码制作中会经常用到的问题。我们先来看这样一个例子,加入我们这里有一个div,宽度和高度为300px...

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

  1)单行文本的居中

  主要实现css代码:

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

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

  成都前端开发HTML技巧:实现元素水平与垂直居中的几种方式

  成都前端开发HTML技巧:实现元素水平与垂直居中的几种方式

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

  2)多行文本的垂直居中

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

  1、使用display:table来实现

  主要实现代码:

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

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

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

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

  成都前端开发HTML技巧:实现元素水平与垂直居中的几种方式

  成都前端开发HTML技巧:实现元素水平与垂直居中的几种方式

  2、使用absolute与transform配合实现

  主要实现代码:

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

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

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

  成都前端开发HTML技巧:实现元素水平与垂直居中的几种方式

  3、使用flex实现

  主要实现代码:

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

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

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

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

  成都前端开发HTML技巧:实现元素水平与垂直居中的几种方式

  好了,本篇文章就给大家说到这里,大家自己动手写一下看能不能写出一样的页面效果出来,也可以找一些类似的页面自己练习一下。

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56