CSS

设置元素水平垂直居中N中方法

自己在实际开发中经常会遇到要水平、垂直居中一个元素，甚至是多个元素实现水平垂直居中。但是每次到用的时候都会出现这样那样的问题，很是纠结。So，我索性就狠下来心花点时间来总结一下这方面的知识，也帮助我来理解、融汇贯通。好了，废话不多说，直接看 demo。

此Demo中包括一下两点：

  • 单个元素的水平垂直居中
  • 多个元素的水平垂直居中

理解vertical-align属性

  • vertical-align
    • 设置元素在垂直方向上的对齐方式

注意：
1.垂直对齐属性只对行内元素有效
2.垂直对齐属性只对父级元素设置了line-height的元素

  • 基线对齐（vertical-align : baseline）

    • 所谓的基线对齐就是：使元素的基线同父元素的基线对齐
    • 默认对齐方式是基线对齐

  • 中间对齐（vertical-align : middle）

    • 使元素的中线同父元素的中线对齐，也就达到了垂直居中的效果

理解line-height

基本概念

  • 基线、中线、顶线、底线

  • 基线

    • 基线并不是汉字的下端沿，而是英文字母”x”的下端沿

  • 行高

    • 文本间基线的距离

  • 行距

    • 上行文本的底线到下行文本顶线之间的具体

  • 内容区

  • 行内框

    • 行内框只是一个概念，它无法显示出来，但是它又确实存在
    • 它的高度就是行高
    • 在没有其他因素（padding）影响的时候，行内框等于内容区域

  • 行框(line box)

  • 同行内框类似，行框是指本行的一个虚拟的矩形框
  • 行框高度等于本行内所有元素中行高最大的值

line-height的设置

  • 行高继承

    • 默认情况下，如果父元素设置了line-height，而子元素没有设置，那么子元素将会将会继承父元素的line-height

  • 行高的计算

    • 行高常用的单位：
      • px - 固定值
      • em - 一个em的大小等于当前行中font-size的大小
      • number - 一个纯数字，数字大小表示的是font-size的倍数
      • normal - 正常，默认值，默认一般为1.2
      • inherit - 继承
    • 一般情况下如果行内有多种大小字体，可以用一个纯数字设置行高，这样可以避免行高小于字体大小而导致文字重叠

纯CSS代码实现小三角效果

  • 实现方法：

    <div class="triangle"></div>
    .triangle-all{
  width: 0;
  height: 0;
  border-width: 30px;
  border-style: solid;
  border-color: #c03 #fc0 #69c #6c6;/* 红 黄 蓝 绿 */
}

  • 效 果 图

  • 实现原理
    • 利用元素的四个border会彼此叠加的性质来制作三角形，只要让其他三条边隐藏起来就可达到效果。

通过上面的原理，我们来制作一个指向下的三角形：

  • 实现方法：

    <div class="triangle-all"></div>
    .triangle_down{
  width:0;
  height:0;
  border-width:30px 30px 0;
  border-style:solid;
  border-color:#c03 transparent transparent ;/* 红 透明 透明 */
}

  • 效 果 图

  • 原理分析
    • border-color:#c03 transparent transparent ;是将需要隐藏的边的颜色设置成透明；
    • border-width:30px 30px 0; 是将三角形对边的宽度设置为0(这里对边是border-bottom)这么做的原因是减小三角形有效作用区域。

通过上面的原理，我们来制作类似下面的tip效果：

  • 实现方法

    <div class="triangle-tip-up"></div>
    .triangle-tip-up{
  width: 200px;
  height: 30px;
  background:#3FB58E;
  border-radius: 4px;
  position: relative;
}
.triangle-tip-up:before{
  content:'';
  width: 0;
  height: 0;
  border-width: 0 10px 10px;
  border-style: solid;
  border-color: transparent transparent #3FB58E;
  position: absolute;
  left: 80px;
  top: -10px;
}

  • 实现原理

    • 利用一个div来做tip的主体框，设置其position为relative(为了控制三角形的位置)
    • 利用css的:before属性来做三角形的主体元素，设置其position为absolute(这样可以通过设置left和top的值来随意控制小三角的位置)

实现类似下面的不规则三角形

  • 实现方法

    <div class="triangle-scalene"></div>
    .triangle-scalene{
  width: 0;
  height: 0;
  border-width: 0 0 60px 20px;/* 设置对角和相邻的border都为0来实现不规则效果 */
  border-style: solid;
  border-color: transparent transparent #69c;
}

  • 实现原理

    • 设置对角和相邻一边的border都为0,然后通过改变其余两边border的宽度来实现不规则效果