单⾏多⾏⽂字垂直居中
⼀、⾏⾼（line-height）法
如果要垂直居中的只有⼀⾏或⼏个⽂字，那它的制作最为简单，只要让⽂字的⾏⾼和容器的⾼度相同即可，⽐如：
<p >⼏个⽂字或者⼀⾏⽂字的居中对齐⽅法：⾏⾼与容器⾼度相同</p>
⼆、内边距（padding）法
另⼀种⽅法和⾏⾼法很相似，它同样适合⼀⾏或⼏⾏⽂字垂直居中，原理就是利⽤padding将内容垂直居中，⽐如：
<p >⼀⾏⽂字或者⼏⾏⽂字的居中对齐⽅法：padding</p>
三、模拟表格法
将容器设置为display:table，然后将⼦元素也就是要垂直居中显⽰的元素设置为display:table-cell，然后加上vertical-align:middle来实现。
<div >
<p >模拟表格法</p>
</div>
四、CSS3的transform来实现
<div >
<p >transform 法垂直居中</p>
</div>
<div >
<p >transform法⽔平居中，(⽆效)</p>
text align center</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 >⽂字垂直</div>
<div class="red blue">123</div>
<div class="bule red">123</div>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论