Div 设置在父容器底部 且 垂直居中 记录
2018-03-07 10:20
441 查看
方法1:
.parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:200px; height:200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: red; }
方法2:
.parent { width:800px; height:500px; border:2px solid #000; display:table-cell; vertical-align:middle; text-align: center; } .child { width:200px; height:200px; display:inline-block; background-color: red; }
方法3:
.parent { width:800px; height:500px; border:2px solid #000; display:flex; justify-content:center; align-items:center; } .child { width:200px; height:200px; background-color: red; }
方法4:
.parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:300px; height:200px; margin:auto; position:absolute;/*设定水平和垂直偏移父元素的50%, 再根据实际长度将子元素上左挪回一半大小*/ left:50%; top:50%; margin-left: -150px; margin-top:-100px; background-color: red; }
相关文章推荐
- 如何设置图片、文字在容器(div)中垂直居中的显示?
- 如何设置图片、文字在容器(div)中垂直居中的显示?
- 设置一个DIV固定在底部,并且左右固定,垂直居中
- 通过设置文本的行高与外部容器的高度一致,可以使文本垂直居中
- CSS div水平垂直居中和div置于底部
- DIV布局的设置(水平或者垂直居中)
- CSS中如何把Span标签等行内元素设置为固定宽度及div中内容垂直居中
- 盒子居中 在一个div在父容器div中垂直居中
- 让文本或图片在div容器中垂直居中
- CSS div水平垂直居中和div置于底部
- 设置文字在div中垂直居中,使用line-height
- 设置文字在div中垂直居中,使用line-height
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
- 设置 img 在 div 中水平居中和垂直居中
- CSS div水平垂直居中和div置于底部
- div垂直居中于父容器 box-pack 属性和box-align属性控制
- CSS中实现DIV容器垂直居中
- CSS div水平垂直居中和div置于底部
- 设置div水平垂直居中
- CSS div水平垂直居中和div置于底部