How to display bootstrap selectpicker in center not text?

Question

I am using bootstrap selectpicker.I have to display selectpicker select drop down in center of the popup but I don't want to center the text inside the select drop down.I am able to display the button but not select drop down.Would you help me in this?

/*end menu*/
.login-section{
background-color: #fff; 
  border-radius: 04px;
  padding: 10px 20px;
   height: 290px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
 -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow:         1px 1px 22px 0px rgba(50, 50, 50, 0.25);  
}

  select
{
  margin: 0 auto;
  display: block;
}
input[type="submit"], select{
  display: block;
  padding: 07px 02px;
  margin: 07px auto;
  border-radius: 04px;
  width: 250px;

}

input[type="submit"]
{
  background-color: #773F9B;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size:18px;
border-radius: 04px;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>


<div class="login-section">
   <select class="selectpicker"  data-live-search="true" name="test1" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
<select  name="test2">
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>

      <select class="selectpicker"  data-live-search="true" name="test3" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
      <input type="submit" name="submit" value="Submit">
</div>

Answer 1

Added padding: 10px 20px; and removed width: 295px in your .login-section;

Try this.

/*end menu*/
.login-section{
  padding: 10px 20px;
background-color: #fff; 
  border-radius: 04px;
   height: 290px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
 -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow:         1px 1px 22px 0px rgba(50, 50, 50, 0.25);  
}

select
{
  margin: 0 auto;
  display: block;
}
input[type="submit"], select{
  display: block;
  padding: 07px 02px;
  margin: 7px auto;
  border-radius: 04px;
  width: 250px;

}

input[type="submit"]
{
  background-color: #773F9B;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size:18px;
border-radius: 04px;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="login-section">
   <select class="selectpicker"  data-live-search="true" name="test1" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
<select  name="test2">
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>

      <select class="selectpicker"  data-live-search="true" name="test3" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
      <input type="submit" name="submit" value="Submit">
</div>

Answer 2

Try:

select
{
  margin: 10px auto;
}

Answer 3

Put the selects inside a <div> and center it with css: - fixed size - left and right margins auto

/*end menu*/
.login-section{
background-color: #fff; 
  border-radius: 04px;
  width: 295px;
   height: 290px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
 -webkit-box-shadow: 1px 1px 22px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow:    1px 1px 22px 0px rgba(50, 50, 50, 0.25);
box-shadow:         1px 1px 22px 0px rgba(50, 50, 50, 0.25);  
}

select
{
  margin: 10px;
}
input[type="submit"], select{
  display: block;
  padding: 07px 02px;
  margin: 07px auto;
  border-radius: 04px;
  width: 250px;

}

input[type="submit"]
{
  background-color: #773F9B;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size:18px;
border-radius: 04px;
}
#select-cont {
   width:250px;
   margin-left:auto;
   margin-right:auto;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="login-section">
   <div id="select-cont">
       <select class="selectpicker"  data-live-search="true" name="test1" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
<select  name="test2">
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>

      <select class="selectpicker"  data-live-search="true" name="test3" >
       <option>Select</option>
       <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
     <option>abc</option>
      </select>
      <input type="submit" name="submit" value="Submit">
  </div>
</div>