为了账号安全,请及时绑定邮箱和手机立即绑定

div内的div水平垂直居中方式

标签:
JavaScript

第一种情况:不确定宽高

  • 在父级元素用padding确定上下居中

  • 在子级元素用margin确定左右居中

.dad {  border: 1px solid;  padding: 100px 0;
}.son {  border: 5px solid red;  width: 100px;  margin: 0 auto;
}

第二种情况:div的高度确定(全屏情况)

方法一:子级元素高度要确定的情况

  • position:absolute配合margin: auto来实现。

body {  margin: 0;
}.dad {  border: 1px solid;  height: 100vh;  box-sizing: border-box;
}.son {  border: 5px solid red;  width: 100px;  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  margin: auto;  height: 100px;
}

方法二:子级元素宽度和高度都可以不确定的情况

  • 在父级元素添加下面代码

  display: flex;
  justify-content: center;
  align-items: center;

代码展示:http://js.jirengu.com/xabiwesali/1/edit


tips:如何实现一比一的自适应div?

  • padding-top: 100%;



作者:徐金俊
链接:https://www.jianshu.com/p/3cbd9b7cca69

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消