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

作者:洛水赋神更新于： 2020-04-07 22:04:36

　　层叠样式表(英文全称: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设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。