div+css 怎么让一个小div在另一个大div里面 垂直居中
2016-01-08 13:40
826 查看
方法1:
方法2:
方法3:
方法4:
.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; }
相关文章推荐
- CSS之网页弹窗插件
- XSSFWookbook添加单元格样式
- css初始化
- 手机网页开发问题总结(一)
- W3c html+css基础参考手册-2016-01参考
- CSS3 页面跳转的动画效果
- css字体图标浏览器兼容解决方案
- 代码:CSS——reset.css
- css3 transition effect(其它效果)
- 动态添加css样式至文件中
- CSS3:RGBA的使用方法
- 浏览器滚动条样式
- 手机web——自适应网页设计(html/css控制)
- 常用的CSS(收集)
- 获取计算后的css样式
- css中rem的认识
- CSS3实现动画效果教程详解
- 常用css
- CSS定位机制总结
- css014 响应式web设计