纯CSS3实现垂直居中的九种方法
浏览时看到的资料,每个都做了测试,很好,就先收了~
测试的是谷歌浏览器,没有任何问题,用360,IE11,火狐,搜狗浏览器做测试时,第五个方法在360,搜狗,和IE11有点问题,第七个在IE11有问题,第8个在IE11,火狐有问题。保险起见,使用前四个好,出现的问题需要再解决。

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>CSS3实现垂直居中的方法</title> 6 <style> 7 .box{ 8 width: 500px; 9 height: 250px; 10 border: 1px solid #000000; 11 12 } 13 .box1{ 14 display: table-cell; 15 vertical-align: middle; 16 text-align: center; 17 background-color: #A0A0A0; 18 } 19 span{ 20 background-color: #e23a6e; 21 font-size: 18px; 22 font-weight: 500; 23 } 24 .box2{ 25 display: flex; 26 justify-content: center; 27 align-items: center; 28 text-align: center; 29 background-color: #A44849; 30 } 31 .box3{ 32 position: relative; 33 } 34 .box3 span{ 35 position: absolute; 36 width: 300px; 37 height: 60px; 38 top: 50%; 39 left: 50%; 40 margin-left: -150px; 41 margin-top: -30px; 42 background-color: #F5AA51; 43 text-align: center; 44 border: 1px solid #000000; 45 } 46 .box4{ 47 position: relative; 48 } 49 .box4 span{ 50 width: 50%; 51 height: 50%; 52 border: 1px solid blue; 53 margin: auto; 54 overflow: auto; 55 position: absolute; 56 top: 0; 57 left: 0; 58 right: 0; 59 bottom: 0; 60 background-color:#00ff00; 61 } 62 .box5{ 63 position: relative; 64 } 65 .box5 span{ 66 position: absolute; 67 top: 50%; 68 left: 50%; 69 width: 100%; 70 transform: translate(-50%,-50%); 71 text-align: center; 72 border: 1px solid black; 73 background-color: #fa96b5; 74 } 75 .box6{ 76 text-align: center; 77 font-size: 0; 78 } 79 .box6 span{ 80 vertical-align:middle ; 81 display: inline-block; 82 font-size: 16px; 83 background-color: #ffff00; 84 } 85 .box6:after{ 86 content: ''; 87 width: 0; 88 height: 100%; 89 display:inline-block; 90 vertical-align:middle; 91 } 92 .box7{ 93 display: flex; 94 text-align: center; 95 } 96 .box7 span{ 97 margin: auto; 98 background-color: antiquewhite; 99 } 100 .box8{ 101 display: -webkit-box; 102 display: -webkit-box; 103 -webkit-box-pack:center; 104 -webkit-box-align:center; 105 -webkit-box-orient: vertical; 106 text-align: center 107 } 108 109 .floater { 110 float:left; 111 height:50%; 112 margin-bottom:-25px; 113 114 } 115 .content { 116 border: 1px solid blue; 117 clear:both; 118 height:50px; 119 position:relative; 120 background-color: aqua; 121 } 122 </style> 123 </head> 124 <body> 125 <div class="box box1"><span>方法一:方法1:table-cell.纯CSS3实现垂直居中,哈哈哈,我居中了</span></div> 126 <div class="box box2"><span>方法二:方法2:display:flex.纯CSS3实现垂直居中,哈哈哈,我居中了</span></div> 127 <div class="box box3"><span>方法三:方法3:绝对定位和负边距.纯CSS3实现垂直居中,哈哈哈,我居中了</span></div> 128 <div class="box box4"><span>方法四:方法4:绝对定位和0 .纯CSS3实现垂直居中,哈哈哈,我居中了</span></div> 129 <div class="box box5"><span>方法五:方法5:translate .纯CSS3实现垂直居中,哈哈哈,我居中了</span></div> 130 <div class="box box6"><span>方法六:方法6:display:inline-block .纯CSS3实现垂直居中,哈哈哈,我居中了</span></div> 131 <div class="box box7"><span>方法七:方法7:display:flex和margin:auto .纯CSS3实现垂直居中,哈哈哈,我居中了</span></div> 132 <div class="box box8"><span>方法八:方法8:display:-webkit-box .纯CSS3实现垂直居中,哈哈哈,我居中了</span></div> 133 <div class="box"> 134 <div class="floater"></div> 135 <div class="content">方法九:display:-webkit-box .纯CSS3实现垂直居中,哈哈哈,我居中了 </div> 136 </div> 137 </body> 138 </html>
下面的时测试结果图