下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:CSS--几种常用的水平垂直居中对齐方法

作者:洛水赋神     来源: https://www.cnblogs.com/luoshuifushen/p/12532157.html点击数:1784发布时间: 2020-04-08 09:10:00

标签: web设计htmlXML

Web开发

  层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。css不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

  CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

  CSS--几种常用的水平垂直居中对齐方法

  文字的水平垂直居中

  text-align:center;

  line-height:单前元素高度;

  元素的水平垂直居中

  1使用绝对定位

  /*需要固定宽高*/

  position:absolute;

  top:0;

  left:0;

  bottom:0;

  right:0;

  width:xxx;

  height:xxx

  margin:auto;

  2使用绝对定位+calc()

  /*需要知道具体的元素宽高值*/

  position:absolute;

  width:xxx;

  height:xxx;

  top:calc(50%-xxx/2);

  left:calc(50%-xxx/2)

  3.使用绝对定位+transform

  /*不需要知道元素的宽高*/

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%);

  4.使用display:flex;

  display:flex;

  justify-content:center;

  align-items:center;

  CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

赞(9)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程