before以及position:absolute;居中效果

<ul class="order">

<li class="active"><a href="1">待付款</a></li>

<li><a href="1">待发货</a></li>

.pro_ul li{width:15%; height:auto; margin-right:2%; position:relative; border:2px solid #2785cd}

.pro_ul li .title{ position:absolute; top:0; left:0; right:0; bottom:0; width:80%; height:40px; margin:0 auto; background-color:#06C}

/*图片垂直水平居中*/

.middleCenter {

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  max-width: 100%;

  max-height: 100%;

  display: block;

.mk_list{ overflow:hidden}

.mk_list li{overflow:hidden;  margin-bottom:30px; background-color:#fbfbfb}

.mk_list li:nth-of-type(odd) .mk_left{ float:left; width:300px; height:225px; overflow:hidden}

.mk_list li:nth-of-type(odd) .mk_right{ float:right; width:850px; height:auto; }

<style>

#list li:nth-of-type(odd){ background:#00ccff;}奇数行 

#list li:nth-of-type(even){ background:#ffcc00;}偶数行 

</style>

<div>

    <ul id="list">

    <li>1</li>

1、first-child

first-child表示选择列表中的第一个标签。代码如下：

li:first-child{background:#090}

上面的意思是，li 列表中的 第一个li模块的背景颜色。

2、last-child

last-child表示选择列表中的最后一个标签，代码如下：

有时候，要实现一些元素水平垂直都居中，这部分元素呢 可能大小未知，例如一些图片或者是一些未知大小的块元素。

background:url(../images/img.png) no-repeat 0 -54px;第一个0是指图片在最左侧开始的，后面这个-54px是指从图片上面往下第54个像素开始使用图片

1. appearance:none;

2. -moz-appearance:none; /* Firefox */