CSS未知宽高元素水平垂直居中

  • A+
所属分类:CSS

方法一 

思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现

水平居中

优点:父元素(parent)可以动态的改变高度(table元素的特性)

缺点:IE8以下不支持

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>未知宽高元素水平垂直居中</title>
  6. </head>
  7. <style>
  8. .parent1{
  9.     display: table;
  10.     height:300px;
  11.     width: 300px;
  12.     background-color: #FD0C70;
  13. }
  14. .parent1 .child{
  15.     display: table-cell;
  16.     vertical-align: middle;
  17.     text-align: center;
  18.     color: #fff;
  19.     font-size: 16px;
  20. }
  21. </style>
  22. <body>
  23.     <div class="parent1">
  24.         <div class="child">hello world-1</div>
  25.     </div>
  26. </body>
  27. </html>

方法二:

思路:使用一个空标签span设置他的vertical-align基准线为中间,并且让他为inline-block,宽度为0

缺点:多了一个没用的空标签,display:inline-blockIE 6 7是不支持的(添加上:_zoom1;*display:inline)。

当然也可以使用伪元素来代替span标签,不过IE支持也不好,但这是后话了

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>未知宽高元素水平垂直居中</title>
  6. </head>
  7. <style>
  8. .parent2{
  9.     height:300px;
  10.     width: 300px;
  11.     text-align: center;
  12.     background: #FD0C70;
  13. }
  14. .parent2 span{
  15.     display: inline-block;;
  16.     width: 0;
  17.     height: 100%;
  18.     vertical-align: middle;
  19.     zoom: 1;/*BFC*/
  20.     *display: inline;
  21. }
  22. .parent2 .child{
  23.     display: inline-block;
  24.     color: #fff;
  25.     zoom: 1;/*BFC*/
  26.     *display: inline;
  27. }
  28. </style>
  29. <body>
  30.     <div class="parent1">
  31.         <div class="child">hello world-1</div>
  32.     </div>
  33.     <div class="parent2">
  34.         <span></span>
  35.         <div class="child">hello world-2</div>
  36.     </div>
  37. </body>
  38. </html>

方法三

思路:子元素绝对定位,距离顶部 50%,左边50%,然后使用css3 transform:translate(-50%; -50%)

优点:高大上,可以在webkit内核的浏览器中使用

缺点:不支持IE9以下不支持transform属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>未知宽高元素水平垂直居中</title>
  6. </head>
  7. <style>
  8. .parent3{
  9.     position: relative;
  10.     height:300px;
  11.     width: 300px;
  12.     background: #FD0C70;
  13. }
  14. .parent3 .child{
  15.     position: absolute;
  16.     top: 50%;
  17.     left: 50%;
  18.     color: #fff;
  19.     transform: translate(-50%, -50%);
  20. }
  21. </style>
  22. <body>
  23. <div class="parent3">
  24.         <div class="child">hello world-3</div>
  25.     </div>
  26. </body>
  27. </html>

方法四:

思路:使用css3 flex布局

优点:简单 快捷

缺点:兼容不好吧,详情见:http://caniuse.com/#search=flex

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>未知宽高元素水平垂直居中</title>
  6. </head>
  7. <style>
  8. .parent4{
  9.     display: flex;
  10.     justify-content: center;
  11.     align-items: center;
  12.     width: 300px;
  13.     height:300px;
  14.     background: #FD0C70;
  15. }
  16. .parent4 .child{
  17.     color:#fff;
  18. }
  19. </style>
  20. <body>div> <div class="parent4">
  21.         <div class="child">hello world-4</div>
  22.     </div>
  23. </body>
  24. </html>
weinxin
我的微信
这是我的微信扫一扫
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: