垂直居中：display:table的学习
2017-11-05 本文已影响0人
温梦丽
实现div中的不定宽高图片垂直居中
1.这里不得不提这个布局神器 display：table-cell
css代码：
#main{
width:500px;
height:500px;
background:blue;
display:table-cell ;
text-align: center;
vertical-align:middle;
}
HTML代码：
<div id="main">
</div>
下面是我在Chrome下的测试结果。
Paste_Image.png
其中不加display：table-cell；vertical:middle会失效!具体原因是因为：
vertical-align属性只对行内元素有效，对块内元素无效！而此时就会用到display属性，如果display属性为inline-block属性，也没有效果，那是因为将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内！说的通俗点，就是你设置的当前div属性还是块对象呈递，但是允许同一级别的div在同一行内，也可以设置宽度和高度！而如果我们将display属性设置为table-cell，将块元素转化为单元格，然后加上vertical-align：middle，就会生效。
开始 display:table 学习之旅
css中display中与表格相关的属性值有: table、 table-cell 、table-row，它标志着用复杂css技术布局时代的结束，使使用css来布局出类似表格的栅格变得十分迅速和简单。
display:table-cell指让标签元素以表格单元格的形式呈现，使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性，IE6/7不支持（可用其他方法实现类似效果）。display：table-cell属性也会被float，position：absolute等属性破坏效果，应避免同时使用。
基于 display：table的布局可以参考 http://www.frontopen.com/331.html
下面是一些个人的练习
1.两边固定，中间自适应且里面有一张大小不固定的图片，让它在盒子里垂直居中（以前有一次笔试遇到过这种布局的题目，就是蒙。今天发现原来用table来写这么easy）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>表格布局</title>
<style>
#main{
width:100%;
height:500px;
background: #cccccc;
display: table;
}
#left{
width:200px;
display: table-cell;
background:indianred;
}
#middle{
display: table-cell;
background:orangered;
text-align: center;
vertical-align: middle;
}
#right{
display: table-cell;
width:200px;
background: yellow;
}
</style>
</head>
<body>
<div id="main">
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
</body>
</html>
测试结果：
Paste_Image.png
