Div中div居中方式
来源:互联网 发布:jsp企业门户网站源码 编辑:程序博客网 时间:2024/06/03 18:52
方法1:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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:
1
2
3
4
5
6
7
8
9
10
11
12
13
.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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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中图片居中
- div中图片居中
- div中图片居中
- div中图片居中
- div中图片居中
- CSS中DIV居中
- div 中img 居中
- html 中div垂直居中的三种方式
- 总结让图片在div中居中的方式
- html 中div垂直居中的三种方式
- HTML中div垂直居中的三种方式
- 子div在父div中居中。
- div中文字垂直居中
- DIV在页面中居中
- Java虚拟机类加载机制
- rtree原理
- Spring中@Async注解实现方法的异步调用
- 数据降维方法总结
- kalman Set
- Div中div居中方式
- Linux文件权限管理命令
- NameError: name 'file' is not defined
- C++单例模式
- 学习一门新语言需要了解的基础-11 参数传递
- 番茄提醒工具
- Bootstrap Table插件传值给后台解决中文乱码的问题
- ubantu(linux) eclipse 打不开 oom stackoverflow 的原因之一
- python中把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字。