居中方法总结

居中分为水平居中和垂直居中

1、水平居中

1）行内元素居中

行内元素居中是只针对行内元素的，比如文本（text）、图片（img）、按钮等行内元素，可通过给父元素设置 text-align:center 来实现。另外，如果块状元素属性display 被设置为inline时，也是可以使用这种方法。但有个首要条件是子元素必须没有被float影响，否则一切都是无用功。

<template>
    <div class="header">
        <div class="header-left">返回</div>
        <div class="header-input">输入城市/景点/游玩主题</div>
        <div class="header-right">城市</div>
    </div>
</template>

<style lang="stylus" scoped>
 .header
    display: flex
    background: #00bcd4
    line-height: .86rem
    .header-left
      width: .64rem
      float: left
    .header-input
      flex: 1
      background: #fff
      border-radius:.1rem
      height: .64rem
      line-height: .64rem
      margin-top: .12rem
      margin-left: .2rem
      color:#ccc
    .header-right
      float: right
      text-align: center
      width: 1.24rem
</style>

2、垂直居中

垂直居中可分为父元素高度确定的单行文本，以及父元素高度确定的多行文本。

1、父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高，指在文本中，行与行之间的 基线间的距离 )。