下拉列表垂直居中

方法1：相对容器绝对定位，top为容器高度50%，margin-top设置为下拉列表的高度的1/2   

<div style="width:300px;height:200px;background:red;position:relative; ">
          <select style="position:absolute;top:50%;margin-top:-11px;height:22px;">
            <option>11</option>
            <option>11</option>
            <option>11</option>
          </select>
    </div>

方法2：使用line-height,父容器高度与行高都设置为200

          本来觉得这样就可以，事实不是这样的，如果容器中只有<select>,还是向上贴近父容器显示，但是只要加上一些其他内容

          如文本、空格、或其他标签，就可以居中了，让人困惑的时父容器中有两个下拉列表时也能居中，

         效果是出来，至于原因还是真是不清楚

    <div style="width:300px;height:200px;background:green;line-height:200px;">
         <select>
            <option>11</option>
            <option>11</option>
            <option>11</option>
          </select>

           &nbsp;
    </div>

转载于:https://www.cnblogs.com/c2603/p/5016877.html