css常见定位、居中方案

一、 定位

1、静态定位

position:static;（默认，具备标准流条件）

2、相对定位

position:relative;

通过 top 或者 bottom 来设置 Y 轴位置

通过 left 或者 right 来设置 X 轴位置

特点：

1. 相对定位不会脱离文档流
2. 相对于自己原来的位置

3、绝对定位

position:absolute;

通过 top 或者 bottom 来设置 Y 轴位置

通过 left 或者 right 来设置 X 轴位置

特点：

1. 绝对定位的元素会脱离文档流
2. 如果父级没有定位，则相对于文档进行定位
3. 如果父级（祖先级）有定位，则相对于父级（祖先级）进行定位
4. 如果有 padding ，则会相对与 paddingbox 的位置进行定位

4、固定定位（老IE不支持）

position:fixed;

通过 top 或者 bottom 来设置 Y 轴位置

通过 left 或者 right 来设置 X 轴位置

特点：

1. 会脱离文档流
2. 相对于可视窗口进行定位
3. 可借鉴网页两边跟随拉条移动的广告位

5、粘性定位

position: sticky;

定位基点是窗口

通过 top 或者 bottom 来设置 Y 轴位置

通过 left 或者 right 来设置 X 轴位置

特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
2. 粘性定位占有原先的位置（相对定位特点）
3. 必须添加 top 、left、right、bottom 其中一个才有效

粘性定位不起作用的原因

• 父元素不能overflow:hidden或者overflow:auto属性。
• 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
• 父元素的高度不能低于sticky元素的高度
• sticky元素仅在其父元素内生效

6、继承定位

position: inherit;

从父元素继承position属性的值。

7、z-index

可以决定定位元素的层级关系，非定位元素不可使用

二.居中

1、内联元素居中布局

水平方向的居中：

//方法一 
text-align:center; 

//方法二 
dispaly:flex; 
justify-content:center;

垂直居中

单行文本

//方法一
height === line-height;

//方法二
display: flex;
align-items: center;

多行文本

display: table-cell; 
vertical-align: middle;

知识扩展

如果有图片需要与文本进行垂直居中，会发现图片总是会高出一点，无法进行垂直居中，是因为图片下方有三个像素导致的，只要对图片设置vertical-align:middle就好了

vertical-align:middle;

水平垂直居中

display: flex; 
justify-content: center; /* 水平居中 */ 
align-items: center; /* 垂直居中 */

2、块级元素居中布局

水平方向的居中：

//方法一 
定宽：margin： 0 auto; 

//方法二 
dispaly:flax; 
justify-content:center; 

//方法三 
position: absolute
left：50%
margin：负自身宽度一半

垂直居中：

//方法一 
display: flex;
align-items: center; 

//方法二 
position: absolute;
top: 50%;
margin-top：负本身高度一半 

//方法三 
position: absolute;
top: 50%;
transform: translateY(-50%); 

//方法四 
position: relative;
top: 50%;
transform: translateY(-50%);

水平垂直居中：

方法一：绝对定位+ -margin

进行定位后，top与left分别设置50%，这时元素的上边距到父元素的上边距与到子元素的下边距距离是一样的，元素的左边距到父元素的左边距与右边距距离也是一样的，这样再减去元素margin本身高度的一半与宽度的一半，这时元素就能达到垂直居中的效果。

position: absolute; 
top: 50%; 
left: 50%; 
margin-left: —宽度一半;（负） 
margin-top: —高度一半;（负）

方法二：绝对定位 + margin：auto

进行定位后，利用margin的auto属性使margin自动撑满整个父元素，这样就能达到内容居中的效果

position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0; 
margin: auto;

方法三：定位 + transform

使用transform: translate对元素进行移动，这个与第一种方式类似，第一种方法是设置margin值，而这种是定位后的位置进行移动

position: absolute; /*相对定位或绝对定位均可*/ 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

方法四：flex布局（推荐）

使用flex布局，分别设置垂直方向排列子元素的居中与水平方向子元素的居中就能达到垂直居中的效果

display: flex; 
align-items: center; /*垂直居中*/ 
justify-content: center; /*水平居中*/

方法五：grid网格布局（推荐）

实现原理与flex布局一样

display：grid; 
align-items: center; /*垂直居中*/ 
justify-content: center; /*水平居中*/