关于CSS的定位依据与居中对齐方式汇总

一、relative 与 absolute 定位的依据

 

1、relative

依据自身定位

 

2、absolute

向上查找最近一层的定位元素定位（即relative、fixed和absolute）作为依据进行定位，如果没定位元素则依据body定位

 

 

二、居中对齐的方式

 

1、水平居中

（1）通过 text-align （针对行内元素或使用 display: inline-block; 的块级元素）

{
  /* 父元素 */
  text-align: center;
}

 

（2）通过 margin

{
  margin: auto;
}

 

（3）通过绝对定位 + 减去宽度的二分之一：

{
  position: absolute;
  left: 50%;
  margin-left: -(width)/2;
}

 

（4）通过绝对定位 + transform

{
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
}

 

（5）通过弹性布局：

{
  /* 父元素 */
  display: flex;
  justify-content: center;
}

 

2、垂直居中

（1）通过 line-height（只针对行内元素，使用 display: inline-block; 的块级元素无效）

{
  line-height: (height);
}

 

（2）通过绝对定位 + 减去高度的二分之一：

{
  position: absolute;
  top: 50%;
  margin-top: -(height)/2;
}

 

（3）通过绝对定位 + transform：

{
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}

 

（4）通过绝对定位 + margin:auto：

{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

 

（5）通过弹性布局：

{
  /* 父元素 */
  display: flex;
  align-items: center;
}

 

（6）通过表格布局：

{
  /* 父元素 */
  display: table-cell;
  vertical-align: middle;
}