在各浏览器和各分辨率下如何让div内的table垂直水平居中？
Posted i冰冰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在各浏览器和各分辨率下如何让div内的table垂直水平居中？相关的知识，希望对你有一定的参考价值。
本文主要针对需要全屏显示的系统页面内，因为系统经常会用到表格table布局，偶尔的table需要显示在div的正中间，所以鄙人特此总结下div内table的万千姿态。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<title>i冰冰的个人博客</title>
</head>
<body>
<div style="width:500px;height:500px;background-color:Red;">
<table style="width:100px;height:100px;background-color:Blue;">
<tr>
<td>
喜欢你，始于颜值，陷于才华，忠于人品，痴于肉体，死于不敢主动。
</td>
</tr>
</table>
</div>
</body>
</html>
---------------------------------------
红色div里有个蓝色table，现在table可以水平居中.请问:
如何让table水平靠右或水平靠左？
如何让table垂直居中或居上或居下?
---------------------------------------
1.让table在水平方向上的靠左和靠右
table水平靠左：
<table style="width:100px;height:100px;background-color:Blue;margin:0px auto;" align="left">
table水平靠右：
<table style="width:100px;height:100px;background-color:Blue;margin:0px auto;" align="right">
关于水平靠左靠右可以用：margin:0px auto; align="left" 或者" right";
或者在div里面给这个table定义：div { text-align:right 或者 left}
2.通过DIV控制TABLE--------》这里是正居中
<style type="text/css">
#Frame
{
width:500px;
height:300px;
background-color:#666666;
position:absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-150px;
}
</style>
................
<div id="Frame">
<table>
<table>
<div>
................
见证奇迹的时刻到了，垂直水平居中了有木有？？
3.对，你没看错，小结如下：
所有的居中都可以用margin来实现，关于水平靠左靠右可以用：margin:0px auto; align="left" 或者" right";
或者在div里面给这个table定义：div { text-align:right 或者 left}
关于table整体垂直居中、靠上、向下，也可以用margin来完成，不过得根据div的高度和table的高度来决定，也就是说高宽都是死的固定值时可以用margin来做计算用。
4.然如果div和table都用的百分比的话呢？
<style type="text/css">
#Frame
{
width:500px;
height:300px;
background-color:#666666;
position:absolute;
left:50%;
top:50%;
margin-left:-50%;
margin-top:-30%; /*此处根据实际的页面情况去定义*/
}
</style>
................
<div id="Frame">
<table>
<table>
<div>
................
在不固定值的百分比布局页面内，table也是可以乖乖的正居中在div内的。
看官，请笑纳！冰冰奉上……
以上是关于在各浏览器和各分辨率下如何让div内的table垂直水平居中？的主要内容，如果未能解决你的问题，请参考以下文章