CSS 未知宽高元素水平垂直居中
方法一
- 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中
- 优点:父元素(parent)可以动态的改变高度(table元素的特性)
- 缺点:IE8 以下不支持
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent1{
display: table;
height:300px;
width: 300px;
background-color: #FD0C70;
}
.parent1 .child{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
font-size: 16px;
}
</style>
<body>
<div class="parent1">
<div class="child">hello world-1</div>
</div>
</body>
</html>
方法二
- 思路:使用一个空标签 span 设置他的 vertical-align 基准线为中间,并且让他为inline-block,宽度为0
- 缺点:多了一个没用的空标签,display:inline-blockIE 6 7是不支持的(添加上:_zoom1;*display:inline)。
当然也可以使用伪元素来代替 span 标签,不过 IE 支持也不好,但这是后话了
1 | <!DOCTYPE html> |
方法三
- 思路:子元素绝对定位,距离顶部 50%,左边 50%,然后使用 css3 transform:translate(-50%; -50%)
- 优点:高大上,可以在 webkit 内核的浏览器中使用
- 缺点:不支持 IE9 以下不支持 transform 属性
1 | <!DOCTYPE html> |