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

第一种情况:不确定宽高

  • 在父级元素用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%;
    原文作者:小7丁
    原文地址: https://www.jianshu.com/p/3cbd9b7cca69
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞