css控制一个div在其父级的div垂直居中显示
2016-12-21 14:54
615 查看
本文来源地址:http://www.osjoin.com/other/39.html
父的div中有一个子的div,让子div在父div的居中显示。
上代码
1:方法一
2:方法二
这个方法
3:方法三
3:方法四
如有问题可添加我的QQ:1290925041
还可添加QQ群:234812704(洲洲哥学院)
欢迎各位一块学习,提高逼格!
更多信iOS开发信息 请以关注洲洲哥 的微信公众号,不定期有干货推送:
这里写图片描述
父的div中有一个子的div,让子div在父div的居中显示。
上代码
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:方法二
这个方法
vertical-align:middle;不是太好用,不好控制
.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; }
3:方法四
.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; }
还可添加QQ群:234812704(洲洲哥学院)
欢迎各位一块学习,提高逼格!
更多信iOS开发信息 请以关注洲洲哥 的微信公众号,不定期有干货推送:
这里写图片描述
相关文章推荐
- css控制一个div在其父级的div垂直居中显示
- Css控制div水平垂直居中显示
- CSS:使用CSS3将一个div水平和垂直居中显示
- css div中文字垂直居中显示
- DIV+CSS垂直居中一个浮动元素
- div+css 怎么让一个小div在另一个大div里面 垂直居中
- 浅谈css中一个元素如何在其父元素居中显示
- JS+CSS设置img在DIV中只显示Img垂直居中的部分
- DIV+CSS 全屏垂直居中的一个办法
- div+css 怎么让一个小div在另一个大div里面 垂直居中
- 利用css来让一个div在页面中垂直居中的方法
- CSS 控制div在页面中水平垂直居中
- css控制div中图片垂直居中
- CSS控制DIV水平垂直居中
- 浅谈css中一个元素如何在其父元素居中显示
- 编写css让一个已知宽高的div元素水平居中?垂直居中
- div+css:页面整体布局居中显示:上下居中||垂直居中,左右居中||水平居中
- CSS 控制div在页面中水平垂直居中
- 【前台】css控制DIV垂直居中
- 浅谈css中一个元素如何在其父元素居中显示