div内部div居中
来源:互联网 发布:应届程序员工资 编辑:程序博客网 时间:2024/05/16 14:31
方法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宽度100%,内部元素浮动,div居中
- 外部div宽度为100%,内部div宽度也为100%,内部div整体水平居中
- div 居中
- DIV 居中
- div 居中
- div居中
- div居中
- div居中
- div居中
- Div居中
- Div居中
- div 居中
- DIV居中
- div居中
- div居中
- div居中
- Tomcat起动失败的log日志位置
- android 自定义view属性
- 语音识别评估标准-WER
- github push报错fatal: The remote end hung up unexpectedly error: RPC failed; result=56, HTTP code = 20
- Android 7.0 Audio的Resample过程详解
- div内部div居中
- ubutun引导修复
- 爬楼梯——动态规划
- AngularJS使用Echarts
- C++ STL中Map的按Key排序和按Value排序
- 【BZOJ 3594】[Scoi2014]方伯伯的玉米田 树状数组
- 高分笔记考研oj——1324: 算法2-2:有序线性表的有序合并,zoj
- 经常使用的两个清爽的table样式
- 实现类似分享 和支付窗口 从界面下面弹出Style