【前端造火箭🚀】CSS 合集 2 (定位)

132 阅读1分钟

CSS 合集 2 (定位)

1. absolute 和 relative 分别依据什么定位

absolute

依据最近一层的定位元素(absolute relative fixed body)定位

relative

依据自身定位

2. 居中对齐有哪些实现方式(重要)(※)

水平居中

inline 元素:

text-align: center

block 元素:

margin: auto

absolute 元素:

必须知道元素的宽:left: 50% + margin-left: -(width/2)px

垂直居中

inline 元素:

line-height 的值等于 height 的值

absolute 元素:

必须知道元素的高:top: 50% + margin-top: -(height/2)px

水平垂直居中

无需知道元素的宽和高:

absolute 元素:

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

CSS3:

transform: translate(-50%, -50%) + position: absolute + left: 50% + top: 50%