css:子元素div 上下左右居中方法总结

时间:2021-04-16

  如何让一个子元素div块元素上下左右居中,总结方法如下:

  情景一:一个浏览器页面中,只有一个div模块,让其上下左右居中

  解决方案:

  {
  position:fixed;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  }

  备注:此处使用position:fixed为最佳方案,因为position:fixed定位是相对于整个浏览器页面的。

  情景二:一个父元素div,一个已知宽度、高度的子元素div(200*300)

  解决方案:

  1、position布局

  {
  position:absolute/fixed; 
  top:50%;
  left:50%;
  margin-left:-100px;
  margin-top:-150px;
  }

  情景三:一个父元素div,一个未知宽度、高度的子元素div

  解决方案:

  1、position布局,position设为absolute,其他同情景一

  2、display:table

  父级元素:{ display:table;}

  子级元素: { display:table-cell;vertical-align:middle }

  3、flex布局

  父级元素:{ display:flex;flex-direction:row;justify-content:center;align-items:center;}

  子级元素:{flex:1}

  4、translate

  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章