20190301 css知识之元素水平垂直居中、margin、vertical-align、position

左边自适应，右边固定宽度

<div class="box">
  <div class="left">左边自适应</div>
  <div class="right">右边固定宽度</div>
</div>

• flex 布局

.box {
  display: flex;
}
.left {
  flex: 1 1 auto;
  background: green;
}
.right {
  width: 200px;
  background: red;
}

• 左边左浮动，设置 margin-right 负值，右边右浮动

.left {
  float: left;
  width: 100%;
  background: green;
  margin-right: -200px;
}

.right {
  width: 200px;
  float: right;
  background: red;
}

水平垂直居中

水平居中

• 行内元素 text-align: center;

• 块级元素 margin: 0 auto;

• 多个块级元素水平居中

.box {
  /* 1.设置行内元素水平居中的方式 */
  text-align: center;
}
.box div {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
  /* 2.重点是将块级元素转为行内元素 */
  display: inline-block; 
}

垂直居中

<div class="container">
  <span class="center">我是需要垂直居中的元素</span>
</div>

块级元素的垂直居中 —— 已知center元素的宽高

• 利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。

    .container {
      position: relative;
    }
    .center {
      width: 100px;
      height: 100px;
  
      position:absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
    }
  

块级元素的垂直居中 ———— 未知center元素宽高

• 利用绝对定位与margin

    .container {
      position: relative;
    }
    .center{
      position:absolute;
      top:0;
      bottom:0;
      left:0;
      right:0;
      margin:auto;
    }
  

行内元素的垂直居中 ———— 未知center元素宽高

• 使用flex布局轻松解决
• 父容器display: table-cell;配合text-align:center和vertical-align:middle

```css
  .container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
```

• 利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。

    .container{
      position:relative;
    }
    .center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  

• 利用选择器增加一个 100%高，vertical-align: middle 的行内块元素

    .center:before {
      content: ".";
      height: 100%;
      display: inline-block;
      /* 把此元素放置在父元素的中部 */
      vertical-align: middle;
      visibility: hidden;
    }
  

margin: auto

• 属性的目的

  用来分配剩余空间/可用空间的。所以只对有剩余空间的元素有效，比如：有宽度的块级元素。给图片设置margin: 0 auto是无效的，因为图片是内联元素，不独占一行，没有剩余空间。

• 属性拆解

  margin:auto; 相当于 top right bottom left都平均分配剩余空间，所以才会导致水平居中。

• 为什么margin:auto;不能垂直居中

  简单点：因为垂直方向没有剩余空间了。

  • 在普通内容流中，margin:auto;的效果等同于margin: 0 auto;的效果。
  • position:absolute使元素脱离标准文档流
  • 同时设置top和bottom确定高度，同时设置left和right确定宽度。(将给浏览器重新分配一个边界框)都设置为0则该元素将填充父元素的所有可用空间，这样margin在垂直方向就有了可分配的空间。
  • 再设置margin 垂直方向上下为auto，即可实现垂直居中。

vertical-align

• 属性的目的

  将相邻的文本与元素对齐。不必知道元素的大小，元素仍然在文档流中，所以其他元素可以根据它们大小的变化进行相应的调整。

有用的例子就是：居中图标与旁边的文本

• 应用元素

  行内元素：inline, inline-block, inline-table

• 属性值

  a: 元素基线 b: 行盒子基线

  值	含义
  baseline	基线重合
  sub	基线上方
  super	基线下方
  middle	元素上、下边的中点与行盒子基线加上 x-height 的一半对齐
  top	顶边对齐
  bottom	底边对齐
  text-top	元素的顶边与行盒子的文本盒子的顶边对齐
  text-bottom	元素的顶边与行盒子的文本盒子的底边对齐

position 属性

对所有元素都适用

line-height

设置行间的距离，行高。