水平和垂直居中

1.7.1   高度小于1ex的图标的垂直居中：

“x”：x的底部是css中的基线；

x-height：小写x的高度；

1ex：一个小写x的高度。

原理：1ex相当于字母x，所以图片与文字TianJin的对齐，相当于文字x与文字TianJin的对齐，font-size都继承了父元素，自然能对齐。

<divid="down-weather">

<aclass="weather-which-city">

              <pclass="name-city">TianJin</p>

              <iclass="icon-select-city"></i>

       </a>

       <divid="weather_list">

              <imgid="weather_img"src="images/weather.png"/>

       </div>

</div>

.weather-which-city{

       height:24px;

       width:78.7344px;

       margin-bottom:18px;

       color:rgb(63,63,63);

       font-size:20px;

}

.name-city{

       display:inline-block;

       width:46.7188px;

}

.icon-select-city{

       display:inline-block;

       height:1ex;

       width:20px;

       background-image:url(../images/select.png);

       background-repeat:no-repeat;

       background-position:center;

}

1.7.2   line-height和vertical-align配合垂直居中：

首先，设置父级块元素的line-height，因为vertical-align是相对于ling-height来算的；

其次，设置需要居中的元素vertical-align:middle，此时距离居中还差半个x的距离；

最后，设置父级元素的font-size:0，完全居中。

<divid="left-peo-pic">

       <imgsrc="images/katie.png"alt="人"id="Katie" ">     

</div>

#left-peo-pic{

       width:300px;

       height:110px;

       line-height:110px;

       display:inline-block;

       font-size:0;

       background-color: aquamarine;

}

#left-peo-picimg{

       width:84px;

       height:84px;

vertical-align:middle;

}

简单便捷的居中办法，添加以下em代码，并设置需要居中的元素vertical-align:middle。

<divid="left-peo-pic">

       <imgsrc="images/katie.png"alt="人"id="Katie"style="vertical-align:middle;">    

       <emstyle="vertical-align:middle;height:100%;width:0;display:inline-block;">x</em>

</div>

1.7.3   利用text-align:center水平居中：

在父级元素中设置text-align:center可使得它的子元素水平居中显示，如下修改上面的样式可得到水平居中的效果。

#left-peo-pic{

       width:300px;

       height:110px;

       line-height:110px;

       display:inline-block;

       font-size:0;

       background-color: aquamarine;

       text-align:center;

}

1.7.4   利用margin水平居中：

首先，将需要居中的元素设置为块状元素display:block，其次设置margin-left:auto和margin-right:auto，就可以实现水平居中的效果。

值得注意的是，将元素设置为块状元素后，无法通过以上方法实现垂直居中的效果，因为上述方法针对的是内联元素。