居中(在包含块中居中)
水平居中
1)行盒、行块盒水平居中
直接设置行盒父元素:text-align:center;
2)常规流 块盒 水平居中
定宽,左右设置margin为automargin:0 auto;
3)绝对定位或者固定定位元素水平居中
1、left:0; right:0; margin:0 auto;
定宽
2、left:50%; transform:translateX(-50%);
不定宽定宽都可以
4)flexBox盒子居中
给父盒子设置display:flex;justify-content:center;
垂直居中
1)单行文本垂直居中
设置行高等于整个区域高度
2)行块盒或者块盒多行文本的垂直居中
没有完美方案;
设置上下padding撑开,但是不能知道高度
或者父元素设置display:table-cell;vertical-align: middle;
3)绝对定位的垂直居中
1、top:0; bottom:0; margin:auto 0;
定高
2、top:50%; transform:translateY(-50%);
不定高定高都可以
4)flexBox盒子居中
给父盒子设置display:flexalign-items:center;
多行文本居中垂直display:flex; align-content:center;
水平垂直居中(结合起来)
1)设置父元素为相对定位,给子元素设置绝对定位,
top: 0; right: 0; bottom: 0; left: 0; margin: auto;
2)设置父元素为相对定位,给子元素设置绝对定位,需要知道宽高
left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;
3)使用定位属性
设置父元素为相对定位,给子元素设置绝对定位,
left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
4)使用flex布局实现设置父元素为flex定位,
justify-content: center; align-items: center;