首页 > Web开发 > 详细

【CSS】元素垂直水平居中显示

时间:2019-05-10 18:13:13      阅读:123      评论:0      收藏:0      [点我收藏+]

[1] 使用绝对定位和外边距

fathereElement{
  position : relative;
}
childElment{
  margin : auto;
  position : absolute;
  top : 0;
  left : 0;
  bottom : 0;
  right : 0;
  height : 500px;
}

 

[2] 在确认子元素的大小时

fathereElement{
  position : relative;
}
childElment{
  position : absolute;
  top : 50%;
  left : 50%;
  margin-top : - childElement height;
  margin-left : - childElement with;
}

  

[3] 使用transform

fathereElement{
  position : relative;
}
childElment{
  position : absolute;
  top : 50%;
  left : 50%;
  transform : translate(-50%,-50%);
}

 

[4] 使用flex

fathereElement{
  display:flex;
}
childElment{
  position : absolute;
  top : 50%;
  transform : translateY(-50%);
}

  

[5] 利用table-cell,在父级设置一下属性,子内容垂直居中

display: table-cell;
vertical-align:middle;

  

【CSS】元素垂直水平居中显示

原文:https://www.cnblogs.com/Seven77yixuan/p/10845576.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!