转自:https://www.cnblogs.com/moqiutao/p/4807792.html
一、行高(line-height)法
如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:
<p style="border:1px solid red;width:600px;height:100px;line-height: 100px;">几个文字或者一行文字的居中对齐 方法:行高与容器高度相同</p>
二、内边距(padding)法
另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:
<p style="border:1px solid red;width:300px;height:auto;padding:20px 0px;">一行文字或者几行文字的居中对齐 方法:padding</p>
三、模拟表格法
将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。
<div style="display:table;border:1px solid red;width:100px;height:100px;text-align:center;">
<p style="display:table-cell;vertical-align:middle;">模拟表格法</p>
</div>
四、CSS3的transform来实现
<div style="border:1px solid red;width:100px;height:100px;">
<p style="position: relative;top:50%;transform:translateY(-50%);margin:0; ">transform 法 垂直居中</p>
</div>
<div style="border:1px solid red;width:200px;height:100px;">
<p style="position: relative;left:50%;transform:translateX(-50%);margin:0; ">transform法 水平居中,(无效)</p>
</div>
五、css3的box方法实现水平垂直居中
<div class="center">
<div class="text">
<p>box法</p>
<p>我是多行文字</p>
<p>我是多行文字</p>
<p>我是多行文字</p>
</div>
</div>
.center {
width: 300px;height: 200px;border: 1px solid red;
display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;
display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;
display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;
display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;
display: box;box-orient: horizontal;box-pack: center;box-align: center;
}
六、flex布局
<div class="flex">
<div>
<p>flex 布局</p>
<p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
<p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
</div>
</div>
.flex{
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center;
text-align: justify;width:200px;height:200px;border: 1px solid red;
}
补充:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<style>
/* 备注:
PC端有兼容性要求,宽高固定,推荐absolute + 负margin
PC端有兼容要求,宽高不固定,推荐css-table
PC端无兼容性要求,推荐flex
移动端推荐使用flex */
*{margin: 0;padding: 0}
.box{border: 1px solid red;width: 300px;height: 300px;}
.content{background: yellowgreen;}
/* 方法一 */
/* .box{position: relative;}
.content{width: 100px;height: 100px;}
.content{position: absolute;top: 50%;left: 50%;margin-top:-50px;margin-left:-50px; } */
/* 方法二 */
/* .content{width: 100px;height: 100px;}
.box{position: relative;}
.content{position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;} */
/* 方法三: */
/* .content{width: 100px;height: 100px;}
.box{position: relative;}
.content{position: absolute;top:calc(50% - 50px);left:calc(50% - 50px);} */
/* 方法四: */
/* .box{position: relative;}
.content{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)} */
/* 方法五: */
/* .box{line-height: 300px;text-align: center;font-size: 0px;}
.content{font-size: 16px;display: inline-block;vertical-align: middle;line-height: initial;text-align: left;} */
/* 方法六: */
/* .six{border: 1px solid red;width: 300px;height: 300px;}
.six_box{background: yellowgreen;}
.six{writing-mode: vertical-lr;text-align: center;}
.six_box{writing-mode: horizontal-tb;display: inline-block;text-align: center;width: 100%;}
.six_con{display: inline-block;margin: auto;text-align: left;} */
/* 方法七 table*/
/* .box{text-align: center}
.content{display: inline-block;} */
/* 方法八 */
/* .box{display: table-cell;text-align: center;vertical-align: middle;}
.content{display: inline-block;} */
/* 方法九 */
/* .box{display: flex;justify-content: center;align-items: center;} */
/* 方法十 */
.box{display: grid;}
.content{align-self: center;justify-self: center;}
.red{color: red;}
.blue{color:blue;}
</style>
<body>
<div class="box">
<div class="content size">55555</div>
</div>
<br/>
<div class="six">
<div class="six_box">
<div class="six_con"></div>
</div>
</div>
<br/>
<table>
<tbody>
<tr>
<td class="box"><div class="content">1111</div></td>
</tr>
</tbody>
</table>
<div style="writing-mode: vertical-lr;">文字垂直</div>
<div class="red blue">123</div>
<div class="bule red">123</div>
</body>
</html>