以html格式劃分部分

Question

我已將我的html頁面劃分爲具有指定高度的3個部分，如下所示。現在我想把我的下一段代碼放在上面的部分的下面，也放在網頁的中間。但我無法獲得預期的數據。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    height: 30%; 
 
    background-color: white; 
 
    float: left; 
 
} 
 

 
#left { 
 
    width: 500px; 
 
    margin: 5px; 
 
} 
 

 
#center { 
 
    width: 500px; 
 
    margin: 5px; 
 
} 
 

 
#right { 
 
    width: 500px; 
 
    margin: 5px; 
 
} 
 

 
#tablediv { 
 
    position: absolute; 
 
    margin: auto; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100px; 
 
    height: 100px; 
 
    top: 100%; 
 
}

<div id="left">ID <input type="text" id="grn" class="tb1" onkeypress="return isNumber(event)" autofocus="autofocus" /><br><br> Type 
 
    <select name="evalu" id="evalu"> 
 
\t <option value="electrical">Electrical</option> 
 
\t <option value="mechanical">Mechanical</option> 
 
</select><br><br> 
 
    <input type="button" id="find" value="Find" class="button0" /><br><br> 
 
</div> 
 
<div id="center"> 
 
    Name: <input type="hidden" id="name" class="tb1" /><br><br> Section : <input type="hidden" id="sec" class="tb1" /><br><br> V.Inv.No <input type="hidden" name="vinvno" id="vinvno" class="tb1" /><br><br> V.Inv.Date <input type="hidden" name="vinvdt" id="vinvdt" 
 
    class="tb1" /><br><br> 
 
</div> 
 
<div id="right"> 
 
    IRno: <input type="hidden" name="irepno" id="irepno" class="tb1" maxlength="8" /><br><br> IDate <input type="date" name="idt" id="idt" class="tb1" value="<%= new SimpleDateFormat(" dd-MM-yyyy ").format(new java.util.Date())%>"><br><br> 
 
    <input type="button" id="search" value="Search" class="button0" /><br><br> 
 
</div> 
 
<div id="tablediv"> 
 
    <input type="button" value="Show Item List" id="showTable" class="button0" /> 
 
    <table cellspacing="0" id="itemtable" align="center"> 
 
    <tr> 
 
     <td><input type="checkbox" class="btnSelect" id="chk" name="chkOrgRow" /></td> 
 
     <th scope="col"> SIno</th> 
 
     <th scope="col">Item name</th> 
 
     <th scope="col">Item code</th> 
 
     <th scope="col">Supplier</th> 
 
     <th scope="col">Received qty</th> 
 
     <th scope="col">Accepted qty</th> 
 
     <th scope="col">Rejected qty</th> 
 
     <th scope="col">Remarks</th> 
 
    </tr> 
 
    </table> 
 
</div>

modified

Answer 1

#tablediv { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

它將保持tablediv在上面的內容和頁面之間的中間。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
div { 
 
    height: 30%; 
 
    background-color: white; 
 
    float: left; 
 
} 
 

 
#left { 
 
    width: 500px; 
 
    margin: 5px; 
 
} 
 

 
#center { 
 
    width: 500px; 
 
    margin: 5px; 
 
} 
 

 
#right { 
 
    width: 500px; 
 
    margin: 5px; 
 
} 
 

 
@media (min-width: 786px) { 
 
    #tablediv { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    } 
 
}

<div id="left">ID <input type="text" id="grn" class="tb1" onkeypress="return isNumber(event)" autofocus="autofocus" /><br><br> Type 
 
    <select name="evalu" id="evalu"> 
 
\t <option value="electrical">Electrical</option> 
 
\t <option value="mechanical">Mechanical</option> 
 
</select><br><br> 
 
    <input type="button" id="find" value="Find" class="button0" /><br><br> 
 
</div> 
 
<div id="center"> 
 
    Name: <input type="hidden" id="name" class="tb1" /><br><br> Section : <input type="hidden" id="sec" class="tb1" /><br><br> V.Inv.No <input type="hidden" name="vinvno" id="vinvno" class="tb1" /><br><br> V.Inv.Date <input type="hidden" name="vinvdt" id="vinvdt" 
 
    class="tb1" /><br><br> 
 
</div> 
 
<div id="right"> 
 
    IRno: <input type="hidden" name="irepno" id="irepno" class="tb1" maxlength="8" /><br><br> IDate <input type="date" name="idt" id="idt" class="tb1" value="<%= new SimpleDateFormat(" dd-MM-yyyy ").format(new java.util.Date())%>"><br><br> 
 
    <input type="button" id="search" value="Search" class="button0" /><br><br> 
 
</div> 
 
<div id="tablediv"> 
 
    <input type="button" value="Show Item List" id="showTable" class="button0" /> 
 
    <table cellspacing="0" id="itemtable" align="center"> 
 
    <tr> 
 
     <td><input type="checkbox" class="btnSelect" id="chk" name="chkOrgRow" /></td> 
 
     <th scope="col"> SIno</th> 
 
     <th scope="col">Item name</th> 
 
     <th scope="col">Item code</th> 
 
     <th scope="col">Supplier</th> 
 
     <th scope="col">Received qty</th> 
 
     <th scope="col">Accepted qty</th> 
 
     <th scope="col">Rejected qty</th> 
 
     <th scope="col">Remarks</th> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

嘗試更改CSS代碼如下：

#tablediv { 
    position: absolute; 
    margin: auto; 
    right: 0; 
    bottom: 0; 
    left: 50%; 
    height: 100px; 
    transform:translateX(-50%); 
}