一.单行文字居中: height: 100px;height: 100px;overflow: hidden;
二.多行内容居中(容器的高度不能固定): padding-top: 24px;padding-bottom: 24px;
三.块级实现垂直居中:
1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html, body {
position: relative;
height: 100%;
width: 100%;
}
#div1{
width: 200px;
height: 200px;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">千万千万请求请求请求</div>
</body>
</html>
通过position: absolute; top: 0; left: 0; bottom: 0; right: 0;实现居中，div的高度、宽度需要固定。
当子元素高宽大于父元素时且需兼容IE8时只能使用该方式。
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html, body {
position: relative;
height: 100%;
width: 100%;
}
#div1{
width: 200px;
height: 200px;
overflow: auto;
margin: auto;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">千万千万请求请求请求</div>
</body>
</html>
通过position: absolute; left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;实现居中，div的高度、宽度需要固定
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
position: relative;
}
#div1{
width: 200px;
height: 200px;
overflow: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin: auto;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">千万千万请求请求请求</div>
</body>
</html>
通过transform属性实现居中，高度、宽度不需要固定。
4.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
position: relative;
display: table;
}
.table{
display: table-cell;
vertical-align: middle;
}
#div1{
width: 200px;
height: 200px;
overflow: auto;
margin: 0 auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="table">
<div id="div1">
千万千万请求请求请求
</div>
</div>
</body>
</html>
通过父元素设置为display: table;子元素设置为display: table-cell; vertical-align: middle;实现居中，div的高度、宽度不需要固定。
子元素高宽大于父元素时会将父元素撑开。导致无法居中。
5.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
display: box;
display: -webkit-box;
display: -ms-box;
-webkit-box-pack: center;
-ms-box-pack: center;
box-pack: center;
-webkit-box-align: center;
-ms-box-align: center;
box-align: center;
}
#div1{ width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
千万千万请求请求请求
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
#div1{ width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
千万千万请求请求请求
</div>
</body>
</html>
通过flexbox的css3属性实现，display: box;box-pack: center;box-align: center;div的高度、宽度不需要固定。