css 垂直居中方法

css 垂直居中方法

方法一 :弹性盒子布局

• 实现上下左右都居中
  作用在自身
• 代码示范

	{
	display：flex		//使得元素成为行内块元素
	align-items center
	justify-content center
	}

方法二:单元格布局

• 实现垂直居中
  知识点：
  vertical-align: middle,
  该属性仅定义非块级元素的基线，使得文字相对于该非块级元素所在行的基线的垂直对齐。
  所以用这个属性的一定要是非块级元素才生效。
  作用在父元素：

parent {
       		display: table;
           width: 300px;
           height: 300px;
           text-align: center;
       }

作用在自身:

 .son  {
          display: table-cell;
           vertical-align: middle;
          	height: 200px;
          background-color: yellow
      }

• table-cell布局详情见： https://blog.csdn.net/messagebox_/article/details/82380913

方法三 : 利用line-height属性

+要求：作用在父元素上

• 给定高(height:100px)，并且行高(line-height:100px)和高一致（原理：使得父盒子只有一行，子元素默认在一行基线上显示）

方法四 : 利用vertical-align: middle属性

• 作用子元素上：在img标签上加vertical-align: middle，使得文字垂直居中
• 知识点：该属性仅定义非块级元素的基线，使得文字相对于该非块级元素所在行的基线的垂直对齐。

  <div class="box" >
            <img :src=valueUrl  v-show="valueUrl">
            更换头像
  </div>