码迷,mamicode.com
首页 > 其他好文 > 详细

元素居中方式总结

时间:2020-05-23 00:36:08      阅读:49      评论:0      收藏:0      [点我收藏+]

标签:css3   自身   弹性布局   isp   margin   inline   idt   justify   lin   

垂直居中:

块级元素

1.使用position设置定位方式后进行元素的偏移

    .box {
      width: 300px;
      height: 300px;
      background-color: burlywood;
      position: relative;
      top: 50%; /*元素顶部将会定位到希望的居中位置,需要将元素上移自身高度的50%*/
      margin-top: -150px;
      /*上移自身高度的一半*/
      /*
      transform: translateY(-50%);
      CSS3特性,可在高度不确定时使用
      */
    }  

2.利用CSS3的弹性布局(flex)

    /*将需要居中的元素的父元素(body)设置为flex布局,高度确定或不确定时都可使用*/
    .father {
      display: flex;
      /* 定义body中的元素垂直居中 */
      align-items: center; 
      /* 定义body中的元素水平居中 */
      justify-content: center;
    }
    .son {
     width: 300px;
     height: 300px;
     background-color: burlywood; 
     }

内联元素

使用CSS3 flex布局

水平居中:

块级元素

1.直接设置margin

body,html{
  margin: 0;
  padding: 0;
  height: 100%; 
  width: 100%;
  /* 默认为0 */
}
margin: 0 auto/*宽度确定时使用*/

2.使用position设置定位方式后进行元素的偏移(类似于垂直居中相应的方法),先设置left:50%再设置margin-left:(-元素宽度),宽度确定时使用/transform: translateX(-50%);,宽度确不确定都可使用。

/*宽度不确定时使用,默认子元素的宽度和父元素一样*/
  .father {
     width: 500px;
     height: 500px;
     background-color: pink;
     text-align: center;/*将父元素设置text-align:center*/
  }
  .son {
    background-color: blue;
    display: inline;/*子元素设置display:inline或display:inline-block*/
  }

4.使用flex布局(类似于垂直居中相应的方法),设置justify-content: center,宽度确不确定都可使用内联元素也可使用此方法进行水平居中

内联元素

1.若父元素是块级元素,直接设置父元素text-align:center
2.若父元素不是块级元素,先将父元素设置为display:block再设置text-align:center

元素居中方式总结

标签:css3   自身   弹性布局   isp   margin   inline   idt   justify   lin   

原文地址:https://www.cnblogs.com/xuewting/p/12940327.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!