设置元素的垂直居中

最新推荐文章于 2024-03-13 09:18:33 发布

alkbjewq29891

最新推荐文章于 2024-03-13 09:18:33 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/evaling/p/6803815.html

版权

总结一下居中的一系列问题：

（1）单行文本垂直居中

　　设置行高：line-height

（2）垂直居中一张图片

　设置行高：

<div id="parent">
　　<img src="img.png">
</div>
<style>
　  #parent{

　　line-height:200px;
　　}
   #parent img{
    vertical-align:middle
　　}

</style>

　　利用css，table布局的方式：(假如一个页面中既有单行数据，又有多行的数据，此时设置行高，或者padding的方法都会行不通，此时利用display:table的方法就很完美了)

<div id="parent">
    <div id="child">Content here</div>
</div>
<style>
     #parent {display: table;}
     #child {
          display: table-cell;
          vertical-align: middle;
     }
</style>

　　利用定位的方法：

#parent {position: relative;}
#child {
    position: absolute;
    top:50%;
    left:50%;
    width: 50%;
    height: 50%;
    margin: -25% 0 0 -25%; 
}

转载于:https://www.cnblogs.com/evaling/p/6803815.html