垂直水平居中

初始html:
<div id="container"> <div id="box"></div> </div>
初始css:
#container{ width: 400px; height: 400px; }
#box{ width: 100px; height: 100px; }

方法一:* margin: auto; *(必须固定父元素大小)
#container{
  position: relative;
}
#box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
方法二:绝对定位法 (必须固定父元素大小)
#container{
  position: relative;
}
#box{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
/* 或者 transform: translate(-50%,-50%);这种方法不需要知道子元素的大小 */
}
方法三:table-cell方法(可不设置父元素大小)
#container{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  /*此时给父元素设置margin无效,并且不设置父元素的宽高只设置padding也可实现居中 */
}
#box{
  display: inline-block;
}
方法四:flex布局(可不设置父元素大小)
#container{
  display: flex;
  /* 此时父元素也可不知大小,仅用padding撑开盒子也可居中,但是这里父元素是块元素,要占满一行 */
}
#box{
  margin: auto;
}
/* 或者 */
#container{
  display: flex;
  justify-content: center;
  align-items: center;
}
#box{
}
    原文作者:ErogenousMonsta
    原文地址: https://www.jianshu.com/p/d6925e6d0298
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞