首页 > Web开发 > 详细

CSS居中方案

时间:2019-02-02 20:56:16      阅读:186      评论:0      收藏:0      [点我收藏+]

1.行内元素或者内联元素

1.垂直居中

设置行高和高度一致,如果没必要设置高度的话,可以直接利用line-height垂直性,直接设置需要的高度为line-height的高度亦可居中

  .center-single-text {
    height: 100px;
    line-height: 100px;
  }

利用内联元素的vertical-align基线参考这一行的其他元素内联元素基线,设置一个伪元素来指定其基线为航中间,设置伪元素高度为100%,然后inline-block,vertical-align: middle
接着设置需要被垂直居中的元素 vertical-align: middle

  .ghost-center:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-algin: middle;
  }
  .ghost-center center-element {
    display: inline-block;
    vertical-align: middle;
  }

2.水平居中

/* 在父级元素设置 */
.center-chlidren {
  text-align: center;
}

2.块级元素

1.垂直居中
利用绝对定位将元素左上角移至父元素中心,然后将元素中心移至父元素中心即可。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); 
}

2.水平居中

/* 在居中元素设置 */
.center-me {
  margin: 0 auto;
}

居中神器 flex

无需区分元素类型,一致地行为完成居中,需要注意兼容性

.parent {
  display: flex;
  /* 水平居中 */
  justify-content: center; 
  /* 垂直居中 */
  align-items: center;
}  

CSS居中方案

原文:https://www.cnblogs.com/sefaultment/p/10349124.html

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