极客观点
项目管理
HarmonyOS
遇到一个实现对话框垂直水平居中的示例，实现方法没有遇到过，例子的效果页面：http://output.jsbin.com/udeqi...
源码：
html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>position: fixed/absolute 元素水平居中 by 一丝</title>
</head>
<body>
<div class="dialog" id="dialog">
<div class="inner">
<div class="header">
<div class="titlebar">
<div class="title">我是一个Dialog</div>
<a tabindex="1" class="close" onclick="document.getElementById('dialog').style.display='none'" href="javascript:();">×</a>
</div>
</div>
<table>
<tbody>
<tr>
<td class="drag">
<div class="content">偶是fixed的，怎么样居中了吗<br>偶是fixed的，怎么样居中了吗
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>css：
* {
margin: 0;
padding: 0;
}
body,input,button { font-family: "helvetica neue", stheiti, "microsoft yahei", tahoma, sans-serif; }
html{
/* overflow-x: hidden; */
}
table{
/* width: 100%; */
table-layout: fixed;
border-collapse: collapse;
}
.dialog:after{
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;
background-color: red;
}
.dialog{
position: fixed;
z-index: 999;
left: -100%;
right:100%;
top:0;
bottom: 0;
background-color: #CCC;
text-align: center;
font-size: 0;
/* -webkit-transform: translateZ(0); */
}
.inner{
display: inline-block;
*display: inline;
*zoom:1;
vertical-align: middle;
text-align: left;
position: relative;
right: -100%;
font-size: 16px;
}
.content{
padding:10px 20px;
text-align: center;
}
.header{
overflow: hidden;
background: #46A0E1;
color:#FFF;
position: relative;
border-bottom: 1px solid #317EBD;
background: -webkit-gradient(linear,0% 0%, 0% 100%,from(#46A0E1),to(#3280BF));
background: -moz-linear-gradient(top,#46A0E1,#3280BF);
background: -o-linear-gradient(top,#46A0E1,#3280BF);
background: linear-gradient(top,#46A0E1,#3280BF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#46a0e1',endColorstr='#3280bf');
}
.header .titlebar{
padding:5px .5em;
border-bottom: 1px solid #6DA6E1;
}
.header .title{
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.header .close{
text-decoration: none;
color:#EEE;
font-size: 32px;
position: absolute;
right: 5px;
top:-7px;
}
.header .close:hover{
color:red;
}
.inner{
border: 5px solid rgba(102, 102, 102, .3);
border-radius:5px;
border: 5px solid #CCC \9;
}
我把table-layout：fixed注释掉就不能居中了。 请大家分析一下这种居中是什么原理？