文本在盒子中水平垂直居中

水平居中

text-align: center;

垂直居中

vertical-align 无法满足所有情况

vertical-align只对拥有valign特性的元素才生效

• <td>、<th>、<caption>等

<div>、<span>没有valign特性，因此需要

vertical-align: middle

几种常用垂直居中方法

单行文本居中

<div class="div1">单行文本居中</div>

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 背景样式 */
.div1 {
  height: 100px;
  background-color: yellowgreen;
}

1.line-height和所在区域height(即容器height)

原理

行高：上间距 + 文本高度 + 下间距

• 上间距 = 下间距

line-height属性会继承

.div1 {
   /* line-height 和 height相当 */
  line-height: 100px;
}

存在缺陷，只能实现单行居中，多行时会超出父元素

    <div class="div1">
      单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本
    </div>

解决上述超出问题，可以多套一层标签，将继承的行高修改了

• 个人感觉还不如直接flex

<div class="div1">
    <div class="child">
      单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中单行文本居中
    </div>
</div>

.div1 {
    height: 100px;
    line-height: 100px;
    background-color: yellowgreen;
}
.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
}

多行文本居中

<div class="div1">多行文本居中 多行文本居中 多行文本居中 多行文本居中 多行文本居中 多行文本居中 多行文本居中 </div>

.div1{
  width: 200px;
  border: 1px solid red;
}

1.容器高度不固定

高度由内部文本撑开

• height去掉

使用padding使文本看起来居中

.div1{
  padding: 50px 0;
}

这样实现是把容器撑开再居中

2.容器高度固定

.div1{
  height: 200px;
}

①vertical-align属性

只有拥有valign特性的元素才生效

• display属性，是的元素拥有valign特性

<div class="parent">
	<div class="div1 child">多行文本居中 多行文本居中 多行文本居中 多行文本居中 多行文本居中 多行文本居中 多行文本居中 </div>
</div>

.parent {
	display: table;
}
.child {
    /* 容器高度固定 */
    height: 200px;
    
    display: table-cell; 
    vertical-align:middle;
}

缺点就是不兼容ie6、ie7

注意：

• display: table时padding会失效
• display: table-row时margin、padding同时失效
• display: table-cell时margin会失效

IE7及以下的版本并不能很好的支持display:table和display:table-cell属性

②考虑兼容IE7以及以下版本

③flex元素居中

• 这样会多一些元素，增加消耗

<div class="parent">
    <div>多行文本1</div>
    <div>多行文本2</div>
    <div>多行文本3</div>
</div>

.parent {
    display: flex;
    flex-direction: column;
    align-items: center;
}

参考