Appearance
DIV 水平垂直居中
适当安排一些反例能帮助人们注意先前没有注意的新特征, 了解哪些特征与某些特定概念相关或无关。 —— 《人是如何学习的: 大脑、心理、经验及学校》
一、使用绝对定位进行水平居中
(一)不知道当前元素的具体的宽度和高度
方法一
- 设置当前元素的父元素的
position
属性为relative
- 设置当前元素的
position
属性为absolute
- 设置当前元素的
top
left
属性为50%
- 设置当前元素
transform
为translate(-50%,-50%)
方法二
- 设置当前元素的父元素的
position
属性为relative
- 设置当前元素的
position
属性为absolute
- 设置当前元素的
top
right
bottom
left
属性为0
- 设置当前元素的
margin
属性为auto
(二)已知当前元素具体的宽度和高度
- 设置当前元素的父元素的
position
属性为relative
- 设置当前元素的
position
属性为absolute
- 设置
margin-left
,margin-top
为当前元素width
height
属性的一半的负值
二、使用 Flex
- 设置父元素的
display
属性为flex
- 设置父元素的
align-items
属性为center
(仅当父元素的flex-direction
属性为row
时生效)