padding-left与text-align: center在有定位的组件中如何区分应用

我们写一个带箭头的header和一个左边带图标的input来做比较（注：矢量图标链接需引入）
1、首先我们写一个带箭头的header

 <div class="header">
        <div class="header-left font">&#xe650;</div>
        首页
    </div>

样式如下：

.header {
  color: #ffffff;
  font-size: 26px;
  font-weight: bold;
  position: relative;
  height: 45px;
  line-height: 45px;
  background-color: #ef6d6d;
  margin-top: 10px;
  text-align: center;
}
.header .header-left {
  position: absolute;
  left: 10px;
  top: 0;
  font-size: 16px;
}

2、接下来写带图标的input

 <div class="input-group">
     <div class="input-group-adds font">&#xe652;</div>
      <input type="text" class="form-control" placeholder="请输入用户名">
 </div>

样式如下：

.input-group {
  width: 100%;
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 4px ;
  margin-top: 10px;
  padding-left: 60px;
  position: relative;
}
.input-group .input-group-adds {
  width: 60px;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 23px;
  text-align: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  margin-right: 1px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.16);
}
.input-group .form-control {
  width: 100%;
  padding: 10px 12px;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px ;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.16);
}

二者中我们都使用了定位，唯一的区别是header中没有使用padding-left给左边的箭头预留位置，而input中我们需要使用padding-left给左边的图标预留位置，这样写的原因是：header中的首页是居中的不会遮挡我们定位到左边的箭头，input中输入框的文字自身是居左的为了避免与左边的图标重叠所以我们需要用到padding-left预留出左边的位置。