关于子DIV居中的问题
来源:互联网 发布:c语言贴吧 编辑:程序博客网 时间:2024/05/29 15:28
DIV居中的四种方法
方法一:
.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;}
方法二:
.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; }
方法三:
.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; }
方法四:
.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;
感觉第四钟方法实际开发用的比较多。
0 0
- 关于子DIV居中的问题
- 关于子元素居中的问题
- 关于div内嵌div居中的问题
- 关于DIV高度居中问题
- div居中的问题
- 关于弹出div层居中的问题及解决方法
- 关于css中两层div的水平垂直居中问题
- 关于css中两层div的水平垂直居中问题
- 关于div居中的话题
- IE 的 DIV居中问题
- div的上下左右居中问题
- 关于div+css设置居中问题
- 子div垂直居中
- 一个关于里层div在外层div里居中的问题
- 关于Div半透明子元素不透明的问题
- div+css的图片居中的问题
- 关于DIV居中布局
- 关于DIV垂直居中
- Spring+MyBatis实现数据库读写分离方案
- 安装vs2015中文版语言提示“The language pack is already installed”
- webstorm开发vue,进行一些配置
- 从源代码的角度分析--在BaseAdapter调用notifyDataSetChanged()之后发生了什么
- 在安装VirtuaBox时发生严重错误
- 关于子DIV居中的问题
- https请求 CFNetwork SSLHandshake failed (-9807)
- Android开发模式之--MVP设计模式一
- AmigoDateTimePicker 和 DateTimePicker 反射
- 【hpuoj】模电问题
- BZOJ 1455 罗马游戏
- VS2013 MFC使用位图美化对话框
- BZOJ2893: 征服王
- 完数