定义:居中是指盒子的其包含块中居中
行盒(行块盒)水平居中
- 直接设置行盒(行块盒)父元素 text-align:center;
常规流块盒水平居中
- 定宽, 设置左右margin为auto;
浮动块盒水平居中
- 一般会通过设置magin手动居中
绝对定位元素的水平居中
- 定宽,设置左右的坐标为0 (left:0,right:0),将左右的margin设置为auto , (因为不是常规流,所以不同只通过定宽,
左右margin设置为margin实现居中)
注: 实际上,固定定位(fixed)是绝对定位(absolute)的特殊情况 ,所以固定定位跟绝对定义一样
------区别: 固定定位相对于视口 ,绝对定位相对于最近一级的 定位不是 static 的父元素来进行定位
单行文本的垂直居中
-
设置文本所在元素的行高,为整个区域的高度(height = line-height)
例: height = 50px; line-height = 50px;
行块盒或块盒内多行文本的垂直居中
-
没有完美方案,设置盒子上下内边距相同,达到类似的宽度
-
也可以用一个元素包裹住内容,用绝对定位
绝对定位的垂直居中
- 定高,设置上下的坐标为0 (top:0,bottom:0),将上下的margin设置为auto