我有一个包含表格的div,它们居中:
<div class="parent">
<table class="child">
</table>
</div>
CSS:
.parent{
position: absolute;
width:300px;
height:200px;
top:50%;
left:50%;
margin:-100px 0 0 -150px;
background: #fff;
border: 1px solid #fff;
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
display:inline-block;
text-align:center;
}
如果表格大于div的大小,它会重叠它,我需要它来调整父div的大小。我相信绝对位置是问题...有没有办法解决这个问题?
答案 0 :(得分:2)
你可以使用translate和min-width,用绝对值删除高度:
.parent{
position: absolute;
min-width:300px;/* optionnal*/
top:50%;
left:50%;
background: #fff;
border: 1px solid #fff;
border-radius: 5px ;
text-align:center;
transform:translate(-50%,-50%);
}
.child {
margin:0 auto;
}
td {
border:solid;
}
table:hover td{
padding:2em;/* demo purpose */
}
<div class="parent">
<table class="child">
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</table>
</div>
或使用flex模型
html,body {
height:100%;
width:100%;
}
body {
display:flex;
align-items:center;/* vertical*/
justify-content:center;/* horizontal*/
margin:0;
}
.parent{
background: #fff;
border: 1px solid #fff;
border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
display:inline-block;
text-align:center;
}
.child {
}
td {
border:solid;
}
table:hover td{
padding:2em;
}
<div class="parent">
<table class="child">
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</table>
</div>