CSS属性 - display

• 能修改元素的显示类型，有4个常用值

  • block：让元素显示为块级元素（独占父元素的一行并且可以设置宽高）
  • inline：让元素显示为行内级非替换元素（不能再设置宽高）
  • none：隐藏元素（不占页面空间）
  • inline-block：跟其他行内级元素在同一行显示,可以随意设置宽高

    元素的居中显示

• 注：不同类型的元素在其父元素中居中显示的方式是不一样的

行内级元素

• 水平居中：在父元素中设置text-align: center
• 垂直居中：给父元素设置如下CSS样式

  • display: flex;
    align-items: center;

块级元素

• 水平居中：给当前块级元素中设置margin: 0 auto
  • 前提：当前块级元素必须要有宽度，且这个宽度不能够占满父元素的宽度
  • 原理：块级元素默认独占父元素的一行，只能设置外边距来调整块级元素的位置

• 如果希望给块级元素中的文本内容或其他嵌套的元素水平居中，那么可以

  • text-align: center;
    

• 垂直居中：给父元素设置如下CSS样式

  • display: flex;
    align-items: center;
    

定位元素

• 定位元素的水平居中

  • .box {
    /* 1.给图片的外部包裹一个div，并且将图片溢出的部分隐藏 */
    overflow: hidden;
    }
    img {
    position: relative;
    /* 2.将图片向左移动自身宽度的一半 */
    transform: translate(-50%);
    /* 3.将图片向右移动父元素宽度的一半 */
    left: 50%;
    }
    

• 定位元素的垂直居中

  • img {
     position: relative;
     top: 50%; <!-- 百分比参照父元素的高度 -->
     transform: translate(0,-50%);   <!-- 百分比参考当前元素的大小 -->
    }
    

固定定位元素

• 固定定位元素：绝对定位元素、固定定位元素
• 前提：定位的参照对象都必须为body元素

• 水平居中

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

• 垂直居中

  • 将上图中代码中的上下外边距设置为auto