cy1121

文字居中 1 固定容器高度的单行文本垂直居中:height=line-height

             2 未知容器高度的文本垂直居中:设定padding,使上下的padding值相同即可

               3 固定容器高度的多行文本垂直居中:让<div>模拟<table>使用vertical-algin 

      父容器 #wrap{

              display:table

            }

      子容器 #content{

             vertical-algin:middle;

              display:table-cell;

            }


图片居中 垂直居中一张图片 vertical-align:middle;

1 html:<div id="parent">
      <div id="child">Content here</div>
      </div>
css :
#parent {position: relative;}
#child {
position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;
margin: -15% 0 0 -25%;
}

2 html:<div id="parent">
<div id="child">Content here</div>
</div>
css:#parent {padding: 5% 0;}
#child {padding: 10% 0;}

 元素高宽已知.#parent{width:600px;height:400px;position:absolute;left:50%;top:50%;margin-top:-200px;margin-left:-300px;}
 元素高宽未知(使用css3的属性,会出现兼容问题)#parent{ width:600px;height:400px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
}

分类:

技术点:

相关文章:

  • 2021-12-22
  • 2021-12-14
  • 2021-11-07
  • 2022-12-23
  • 2021-11-30
  • 2021-12-31
猜你喜欢
  • 2021-12-05
  • 2021-12-31
  • 2021-12-04
  • 2021-09-13
  • 2021-07-28
相关资源
相似解决方案