css居中前言

垂直居中前言

问题描述

一段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 既可做到

还有两篇文章很赞：

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

最后编辑于：2018.01.18 22:08:02

css居中前言

垂直居中前言

问题描述

如何做到水平居中

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

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

vertical-align

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

还有两篇文章很赞：

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