<div class=‘box‘ style="text-align: center;">hello world</div>
<div class="box2" style="width:150px;height:100px;line-height: 100px;">文本垂直水平居中</div>
flex布局会让容器内的元素得到垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆</title>
<style type="text/css">
html{width: 100%;height: 100%;} /*整个页面的居中*/
body{
width: 100%;
height: 100%;
display: flex; /*flex弹性布局*/
justify-content: center;
align-items: center;
}
#login{
width: 300px;
height: 300px;
border: 1px black solid;
display: flex;
flex-direction: column; /*元素的排列方向为垂直*/
justify-content: center; /*水平居中对齐*/
align-items: center; /*垂直居中对齐*/
}
</style>
</head>
<body>
<div id="login">
<h1>登陆</h1>
<input type="text"><br>
<input type="password"><br>
<button>确定</button>
</div>
</body>
</html>
css部分：
<style>
.box{
width: 150px;
height: 150px;
background:blue;
position: relative;
}
p{
width: 50px;
height: 50px;
background:red;
position: absolute;
left:50%;
top:50%;
margin-left:-25px;
margin-top: -25px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
html部分：
<div class="box"><p>A</p></div>
<style>
*{padding: 0;margin: 0;} /*解决容器内元素.div是p元素产生的居中不完整*/
.box{
margin: 20px auto;
width: 150px;height: 150px;
background:blue;
position: relative;
text-align: center;
}
.box .div1{
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
background: red
}
</style>
.box p{
width:50%;
height: 50%;
overflow: auto;
position: absolute;
background:red;
margin: auto;
top:0;
bottom:0;
left:0;
right:0;
}
.box{
width: 150px;height: 150px;
background:blue;
position: relative;
text-align: center;
display: table-cell;
vertical-align: middle;
}
缺点：对容器.box的子元素的设置宽高会造成失效。
? web容器就是一种服务程序，在服务器中一个端口就对应一个提供相应服务的程序（比如Apache默认的端口为80），给处于其中的应用程序组件提供环境，使其直接跟容器中的环境变量交互，不必关注其它系统问题。而这个程序就是处理服务器从客户端收到的请求，如Java中的Tomcat容器，ASP的IIS都是这样的容器。这些容器兼容了Web服务器软件的一些功能。一个服务器可以有多个容器。
? 如果web服务器应用得到一个指向servlet的请求（而不是其他请求，如请求一个普通的静态HTML），此时服务器不是把这个请求交给servlet本身，而是交给部署该servlet的容器，要由容器调用servlet的方法，如doPost()或doGet()。
? 容器中，中小型的Tomcat，Nginx大型的，JBoss、Weblogic、WebSphere等。
原文：https://www.cnblogs.com/liutaodashuaige/p/13984599.html