css控制一个div在其父级的div垂直居中显示
来源:互联网 发布:网络上的占豪是谁啊 编辑:程序博客网 时间:2024/05/16 17:34
父的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; }
更多信iOS开发信息 请以关注洲洲哥 的微信公众号,不定期有干货推送:
1 0
- css控制一个div在其父级的div垂直居中显示
- css控制一个div在其父级的div垂直居中显示
- /CSS 图片在DIV中垂直居中的显示方法
- CSS 图片在DIV中垂直居中的显示方法
- CSS 图片在DIV中垂直居中的显示方法
- div+css垂直居中显示
- css的div垂直居中
- CSS控制DIV水平并且垂直居中
- css样式控制div内容垂直居中
- CSS实现div垂直居中 div上下居中显示
- css div中文字垂直居中显示
- css div垂直居中
- CSS div垂直居中
- css垂直居中--div
- css div垂直居中
- css:div垂直居中
- div+css 怎么让一个小div在另一个大div里面 垂直居中
- div+css 怎么让一个小div在另一个大div里面 垂直居中
- 不光是查找值!二分搜索
- libmad 简单说明
- BZOJ 1218 二维前缀和
- 洛谷 P1077 摆花
- javaScript单体内置对象
- css控制一个div在其父级的div垂直居中显示
- 银联Iso8583报文 POS终端报文结构
- 如何在AndroidStduio中找到R文件
- 剑指offer:数值的整数次方(java)
- 《Java报表之JFreeChart》第四讲
- [图床神器]Windows下的图片上传工具MPic
- Android BroadcastReceiver知识点总结
- hdu-3037-Saving Beans(Lucas定理+大组合数取模)
- Shibboleth简介03——Shibboleth是怎样工作的?(二)