css定位

72 阅读1分钟

定位

relative

相对定位是相当对于自己原本的位置进行定位

absolute

绝对定位是相对于离当前元素最近的一层relative或absolute的元素进行定位

fixed

固定定位是相对于浏览器窗口进行定位

居中对齐的实现方式

水平居中

  1. inline居中:text-align: center
  2. block居中:margin:auto
  3. absolute: left:50% + margin-left: -元素宽度一半
  4. justify-content: center; -> flex布局

垂直居中

  1. inline元素:line-height等于height
  2. absolute: top:50% + margin-top: -元素高度一半
  3. absolute:transform(-50%, -50%) -> 不需要知道元素宽高
  4. absolute: top,left,right,bottom: 0 + margin: auto -> 不需要知道元素宽高
  5. align-item: center; -> flex布局