垂直居中前言

问题描述

• 一段html代码是这样

<main className="main">
    <h3 className="head">垂直居中</h3>
    <p className="p">如何做到当然是非常难的</p>
    <div className="div">hahahah</div>
</main>

.main{
  background-color: antiquewhite;
}

.head{
  font-size: 30px;
  display: inline-block;
}

.p{
  height:21px;
  background-color:red;
  display: inline-block;
}

.div{
  font-size:15px;
  display: inline-block;
}

这时候样式是这样的
我们希望所有的inline-block的元素都是垂直居中的

image.png

• 按照以往使用的方法，第一个想到可以试着设置行高，然后使用vertical-align:middle

• 因此我设置了

  line-height:43px //和左边垂直居中四个字高度一样
  vertical-align: middle
  background-color:red;
  display: inline-block;
  

image.png

发现变成了这个样子

• 产生很多疑惑
  • line-height是什么高度
  • line-height应该设置成什么样子才能垂直居中
  • vertical-align：middle为什么不起作用了
    • 如果使用
    • 使用条件是什么
  • 如果不适用line-height + vertical-align：middle如何做到垂直居中？
  • 水平居中又是如何做到的？ 又有什么要求条件呢？

如何做到水平居中

• Q1:是不是只要使用text-align:center就可以使得元素居中？

• A1:经过尝试发现不是这样的，只有针对行级元素才能成功:

  • 针对行内元素
    • 只要给他的父元素设置text-align:center这个行内元素就可以相对于父元素居中
      - 只要行级元素的某个长辈元素设置了text-align:center那么这个行级元素就会相对于父元素居中
      - 但是针对块级元素完全无效

• Q2:如何使得块级元素居中？

• A2:一般使用margin：

  • 针对块级元素：在父元素中水平居中
  • 只要给他自身设置一个margin：auto
  • margin：auto 不生效的情况
    1.被设置的元素是行内元素
    - 通过将该元素设置为display:inline-block
    2.本身宽度和父元素一致
    - 通过给该元素设置一个宽度（小于父元素）

使用line-height+vertical-align的垂直居中

• Q1:一般使用line-height+vertical-align实现垂直居中，他的限制条件是什么呢？什么时候又会失效呢？

• A1:首先从line-height下手：

  line-height（这里只说和问题相关的属性）

  • 仅仅作用于行内元素

  • 值=行间距+font-size （盗一张图瞬间明白）

    
    image.png

• line-height的值推荐使用相对值（相对于font-size），相对值是一个无单位数字，代表大小为：数字* font-size

vertical-align

• 该属性只对且只可以作用于：inline或者inline-block或者table-cell有用，换句话说block元素完全不work，但是对于block和inline-block的作用方式又是不一样的

• 前提：给其inline-block或者block的父元素设置行高

• vertical-align的默认值是baseline，还有其他的一些值的介绍参考http://www.cnblogs.com/hykun/p/3937852.html

• vertical-align的值可以是length（它由一个 <number> 后紧随一个长度单位（px，em，pt，in，mm，...）组成）数值可以为负数

  使用这两个属性做到垂直居中

  • 给inline-block或者block的父元素设置一个line-height
  • 给需要居中的子inline-block或者inline子元素设置一个vertical-align：middle 既可做到

还有两篇文章很赞：

• http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
• http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

下篇文章继续研究实现block元素的垂直居中