有如下一个HTML，但里面的DIV盒子没有居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#app {
width: 500px;
height: 400px;
background: #00FFFF;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
为该DIV盒子设置样式如下：
/* 居中0 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中1 */即居中
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#app {
width: 500px;
height: 400px;
background: #00FFFF;
border: 1px solid red;
/* 居中0 */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* 居中1 */
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
