本文主要针对需要全屏显示的系统页面内，因为系统经常会用到表格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垂直水平居中？的更多相关文章

  1. Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小（无人值守，节约测试成本的福音，BOSS 最爱）

    在 Web UI 自动化测试的过程中,通常会测试页面在不同分辨率下的显示效果,即在不同大小的显示器上全屏浏览器后的页面展示,此种测试方法需要购置不同大小的显示器,或者频繁的设置屏幕分辨率,不仅浪费了大 ...

  2. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

    有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...

  3. Screenfly – 各种设备的屏幕和分辨率下快速测试网站

    Screenfly 让你能够在各种设备的屏幕和分辨率下查看你的网站.输入网址,并点击GO开始浏览网页.Screenfly 可以使用代理服务器来模拟设备,当您查看您的网站,代理服务器模仿您所选择的设备的 ...

  4. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  5. 支持多种浏览器的纯css下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Android应用Icon大小在不同分辨率下定义

    http://www.ard9.com/gsjj/204.html 对于Android平台来说,不同分辨率下Icon的大小设计有着不同的要求,对于目前主流的 HDPI即WVGA级别来说,通常hdpi的 ...

  7. (13)[Xamarin.Android] 不同分辨率下的图片使用概论

    原文 [Xamarin.Android] 不同分辨率下的图片使用概论 设计Android App的时候,其尺寸众多也是一个挑战之一.要针对不同尺寸设计Android App时,就要先来了一下dpi(d ...

  8. Js控制弹窗实现在任意分辨率下居中显示

    弹窗居中比较烦人的是怎么才能在任意分辨率下实现居中显示.1,html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  9. Android 不同分辨率下调整界面

    Android Settings中有修改Disaply size的界面,通过修改Display size,能够修改屏幕分辨率. 由于修改了屏幕分辨率,有可能导致同一界面在不同的分辨率下显示出错(内容显 ...

随机推荐

  1. 学习：Android框架

      引言 通过前面两篇: Android 开发之旅:环境搭建及HelloWorld Android 开发之旅:HelloWorld项目的目录结构 我 们对android有了个大致的了解,知道如何搭建a ...

  2. python字符串和数值操作函数大全（非常全）

    字符串和数值型数字的操作大全 1.反斜杠\的使用规则:一般使用表示续行的操作,可以其他符号相结合组成其他的一些使用符号,转义字符\‘的使用会识别引号,使得字符串中的引号和外面本来的啊引号相区分. (1 ...

  3. 多年珍藏的55w御剑字典

    御剑珍藏55w目录字典,很给力,放在以前直接数据库都能给跑出来. 用法:直接把放入配置文件的目录 链接:https://pan.baidu.com/s/1MGxdd9hH006Y7AO7CpkO8g ...

  4. win7/10获取本地wifi密码明文

    win7 单击右下角无线网图标,选择已连接的无线网 右击无线网名称,选择属性 点击标题栏的安全,再点击显示字符,即可显示wifi密码明文 win10 控制面板[查看方式选类别]-查看网络状态和任务 点 ...

  5. 标准模板库中的队列(queue)

    //C++数据结构与算法(第4版) Adam Drozdek 著  徐丹  吴伟敏<<清华大学出版社>> 队列容器默认由deque实现,用户也可以选择list容器来实现.如果用 ...

  6. JS echarts统计

    柱状图 function drawbarFunc(xs, ys) { //var xs1 = []; //var ys1 = []; require.config({ paths: { echarts ...

  7. 六、java基础-单例模式_继承_覆盖_多态

    1.单例模式: 1)提出原因 是由gof 也就是四人组提出来的.为了保证jvm中某一类型的java对象永远只有一个,同时也是为了节省内存的开销.因为外面程序可以通过new的方法直接调用类里面的构造方法 ...

  8. JAVA字符串与整形、浮点类型之间的相互转换总结

    1.字符串转化为整形.浮点类型 String s = "100"; //方法一 int a = Integer.parseInt(String s); Long.parseLong ...

  9. SSM-文件上传

    因为开发环境和线上环境系统不一样,所以需要区别环境 config.java 可以判断系统进行自动化的区别,我是手动去切换注释的 public class config { //public stati ...

  10. ThreadLocal的原理和在框架中的应用

    ThreadLocal的原理和在框架中的应用 博客分类: java基础 框架多线程SpringthreadDAO  概述      我们知道Spring通过各种DAO模板类降低了开发者使用各种数据持久 ...