CSS实现垂直居中的几种方法
Posted jing-tian
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS实现垂直居中的几种方法相关的知识，希望对你有一定的参考价值。
一、单行文本的居中
1.文字水平居中
1 <div class=‘box‘ style="text-align: center;">hello world</div>
2.文本垂直水平居中
1 <div class="box2" style="height:200px;line-height: 100px;">文本垂直水平居中</div>
二、多行文本的垂直居中
1.使用display:flex实现
flex布局会让容器内的元素得到垂直水平居中
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>登陆</title> 6 <style type="text/css"> 7 htmlwidth: 100%;height: 100%; /*整个页面的居中*/ 8 body 9 width: 100%; 10 height: 100%; 11 display: flex; /*flex弹性布局*/ 12 justify-content: center; 13 align-items: center; 14 15 #login 16 width: 300px; 17 height: 300px; 18 border: 1px black solid; 19 display: flex; 20 flex-direction: column; /*元素的排列方向为垂直*/ 21 justify-content: center; /*水平居中对齐*/ 22 align-items: center; /*垂直居中对齐*/ 23 24 </style> 25 </head> 26 <body> 27 <div id="login"> 28 <h1>登陆</h1> 29 <input type="text"><br> 30 <input type="password"><br> 31 <button>确定</button> 32 </div> 33 </body> 34 </html>
2.使用display:-webkit-box实现
1 body 2 width: 100%; 3 height: 100%; 4 display: -webkit-box; /*flex弹性布局*/ 5 -webkit-box-align: center; 6 -webkit-box-pack: center; 7
display:flex和display:box都可用于弹性布局实现水平垂直居中，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名
3.使用绝对定位和负边距
CSS代码：
1 <style> 2 .boxwidth: 150px;height: 150px;background:blue;position: relative; 3 4 pwidth: 50px;height: 50px;background:red;position: absolute;left:50%;top:50%;margin-left:-25px;margin-top: -25px; 5 display: flex; 6 align-items: center; 7 justify-content: center; 8 9 </style>
HTML代码：
1 <div class="box"><p>A</p></div>
4.使用transform:translate定位
1 <style> 2 *padding: 0;margin: 0; /*解决容器内元素.div是p元素产生的居中不完整*/ 3 .box 4 margin: 20px auto; 5 width: 150px;height: 150px; 6 background:blue; 7 position: relative; 8 text-align: center; 9 10 .box .div1 11 position: absolute; 12 top:50%; 13 left:50%; 14 width:100%; 15 transform:translate(-50%,-50%); 16 text-align: center; 17 background: red 18 19 </style>
说明：/*一般情况下子元素不能是p元素，否则非完全居中，P元素自带有padding距离*/，.div1如果必须是p元素则必须加上*margin:0;padding:0;;进行初始化，
5.绝对定位和0
1 .box p 2 width:50%; 3 height: 50%; 4 overflow: auto; 5 position: absolute; 6 background:red; 7 margin: auto; 8 top:0; 9 bottom:0; 10 left:0; 11 right:0; 12
6.通过display:table-cell;
1 .box 2 width: 150px;height: 150px; 3 background:blue; 4 position: relative; 5 text-align: center; 6 display: table-cell; 7 vertical-align: middle; 8
缺点：是不能对子元素的设置宽高。
以上是关于CSS实现垂直居中的几种方法的主要内容，如果未能解决你的问题，请参考以下文章