table-cell设置宽高、居中
- table-cell默认宽高由内容决定
<style type="text/css" rel="stylesheet">
.content {
color: white;
}
.cell {
background-color: blue;
display: table-cell;
}
</style>
<div class="content">
<div class="cell">
test
</div>
</div>
- 可以设置固定宽高：
.cell {
background-color: blue;
display: table-cell;
width: 100px;
height: 100px;
}
- 直接设置宽高百分比是无效的，因为table没有显式声明，默认加的table宽高也是由内容决定，所有要使用百分比，必须显式声明table并定义宽高（row默认充满table）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>cell</title>
</head>
<body>
<style type="text/css" rel="stylesheet">
.content {
color: white;
}
.table {
display: table;
width: 100%;
height: 200px;
}
.cell {
background-color: blue;
display: table-cell;
width: 100%;
height: 100%;
}
</style>
<div class="content">
<div class="table">
<div class="cell">
test
</div>
</div>
</div>
</body>
</html>
- cell里的内容水平居中
.cell {
background-color: blue;
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
}
- cell里的内容垂直居中：
.cell {
background-color: blue;
display: table-cell;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
注意：设置 line-height: 100%;无效，无法让文字垂直居中,设置 line-height: 200px;也可以垂直居中
