本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用。
居中总结
居中:盒子在其包含块里居中
水平居中
行盒(行块盒)水平居中
要想行盒、行块盒水平居中,给他的父元素设置text-align: center;
常规流块盒水平居中
定宽,然后左右margin为auto
绝对定位元素的水平居中
定宽,然后设置left/right为0,再设置左右margin为auto
tips:
先找绝对定位元素的包含块(从内往外看,找到position不为static的祖先元素时,即为找到;若没有,则整个页面为其包含块)
实际上,固定定位(fixed)是绝对定位(absolute)的特殊情况
垂直居中
单行文本的垂直居中
设置文本所在元素的行高,为整个区域的高度
行块盒或块盒内多行文本的垂直居中
没有完美方案
设置盒子的上下相同的的padding,达到类似的效果
绝对定位的垂直居中
定高,设置top/bottom为0,将上下margin设置为auto
参考资料
- 【渡一教育】袁进老师的html+css基础课程
- 【渡一教育】袁进老师相关课程源代码