居中分为水平居中和垂直居中
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: 顾名思义,行高,指在文本中,行与行之间的 基线间的距离 )。