常见的垂直居中布局方式
常见的垂直居中布局方式
ali安东尼 发表于10个月前
常见的垂直居中布局方式
  • 发表于 10个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

上一篇介绍了水平居中的方法,在这一篇我们将介绍垂直居中的方法。 display:table-cell与vertical-align: middle 无论元素是行内元素,还是块元素,均可以通过设置display:table-cell;和vertical-align: middle,则可实现元素居中。若元素是行内元素,那么就在其自身里面设置这两个特性;若元素是块元素,那么就在其父元素里面设置。

flex弹性布局 上一篇介绍怎么使用flex实现元素的水平居中布局,类似地,也可以使用flex实现垂直居中布局。设置如下:

.son{ display: flex;
align-items:Center; } 如果需要同时实现水平以及垂直的居中,则在样式里面同时设置justify-content:center;和align-items:Center;。

除了以上的方法,还可以通过flex与margin的结合实现,具体设置如下:

.parent{ display: flex; text-align: center; height:100px; background:red; }

.parent span{ margin:auto; } 绝对定位position 使用绝对定位的方式也能实现垂直居中,设置如下:

div{ width: 50%; height: 50%; background: red; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
} 通过margin:auto和top,left,right,bottom都设置为0实现居中。不过这里得确定内部元素的高度,可以用百分比。

由睿江云提供,想了解更多,请登陆www.eflycloud.com

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 3
博文 192
码字总数 173101
×
ali安东尼
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: