Как центрировать (по вертикали и горизонтали) кнопки в теге div?

Question

Я пытаюсь определить, как центрировать (по вертикали и горизонтали) кнопки в теге div.

Учитывая следующий CSS:

div.listBoxMoverUserControl
{
    width: 350px;
    height: 175px;
}

div.listBoxMoverUserControl div 
{
    height: 150px;
}

div.listBoxMoverUserControl div select
{
    width: 150px;
    height: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column1
{
    float: left;
    width: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column2
{
    float: left;
    width: 50px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column3
{
    float: left;
    width: 150px;
}

Я хотел бы, чтобы кнопки в этой разметке были центрированы.Как я могу изменить CSS для достижения этой цели?

<div class="listBoxMoverUserControl">
    <div class="listBoxMoverUserControl_column1">
        <label>Test1</label>
        <asp:ListBox runat="server"></asp:ListBox>
    </div>
    <div class="listBoxMoverUserControl_column2">
        <input id="btnMoveRight" type="button" value="->" /> <br />
        <input id="btnMoveLeft" type="button" value="<-" /> <br />
    </div>
    <div class="listBoxMoverUserControl_column3">
        <label>Test2</label>
        <asp:ListBox runat="server"></asp:ListBox>
    </div>
</div>

Answer 1

установите поля вокруг объекта, чтобы они заняли остальную часть пространства.Если вы хотите центрировать элемент div размером 50 на 50 пикселей в элементе div размером 100 на 100 пикселей, установите отступ в 25 пикселей вокруг элемента div размером 50 пикселей.

Answer 2

Установите элементы внутри вашего div следующим образом:

допуск:0 пикселей авто 0 пикселей авто;выравнивание текста:центр;

<div class="listBoxMoverUserControl_column1" style="margin: 0px auto 0px auto; text-align: center;">

** Я просто привел встроенный пример, чтобы показать вам, что я имел в виду.

Answer 3

Вертикальное центрирование в CSS

Вы можете центрировать текст по горизонтали, используя

text-align: center;

Answer 4

Вот решение с использованием преобразования CSS (пришлось добавить контейнер class="button_group" для двух входных элементов в среднем столбце, чтобы правильно их центрировать):

div,
label,
button_group {
  border: 1px solid blue;
}

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

div.listBoxMoverUserControl {
  width: 352px;
  height: 150px;
}

div.listBoxMoverUserControl div {
  height: 150px;
}

div.listBoxMoverUserControl div select {
  width: 150px;
  height: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column1 {
  float: left;
  width: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column2 {
  float: left;
  width: 50px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column3 {
  float: left;
  width: 150px;
}

div.listBoxMoverUserControl_column1,
div.listBoxMoverUserControl_column2,
div.listBoxMoverUserControl_column3 {
  /* centering */
  position: relative;
}


/* centering */
.button_group {
  height: auto !important;
}

div label,
.button_group {
  /* centering */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="listBoxMoverUserControl">
  <div class="listBoxMoverUserControl_column1">
    <label>Test1</label>
  </div>
  <div class="listBoxMoverUserControl_column2">
    <div class="button_group">
      <input id="btnMoveRight" type="button" value="->" /> <br />
      <input id="btnMoveLeft" type="button" value="<-" /> <br />
    </div>
  </div>
  <div class="listBoxMoverUserControl_column3">
    <label>Test2</label>
  </div>
</div>