Css 如何在div标记中居中（垂直和水平）按钮？

我试图确定如何在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>

测试1




测试2

将div中的项目设置为：

保证金：0px自动0px自动； 文本对齐：居中

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

**我只是做了一个内联示例来向您展示我的意思。

可以使用以下命令将文本水平居中：

text-align: center;

---

设置对象周围的边距以占据剩余空间。如果你想把100px的50px在100px中以100px div为中心，那么你将在50px div上设置一个25px的边距。

这是一个使用CSS转换的解决方案（必须为中间列中的两个输入元素添加一个容器<代码>类“ButnOnGROUP”< /代码>，以便正确地对它们进行定位）：

div，
标签，
按钮组{
边框：1px纯蓝色；
}
*,
*：之前，
*：之后{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
div.listBoxMoverUserControl{
宽度：352px；
高度：150像素；
}
div.listBoxMoverUserControl div{
高度：150像素；
}
div.listBoxMoverUserControl div select{
宽度：150px；
高度：150像素；
}
div.listBoxMoverUserControl div.listBoxMoverUserControl\u列1{
浮动：左；
宽度：150px；
}
div.listBoxMoverUserControl div.listBoxMoverUserControl\u列2{
浮动：左；
宽度：50px；
}
div.listBoxMoverUserControl div.listBoxMoverUserControl\u列3{
浮动：左；
宽度：150px；
}
div.listBoxMoverUserControl_第1列，
div.listBoxMoverUserControl_第2列，
div.listBoxMoverUserControl\u列3{
/*定心*/
位置：相对位置；
}
/*定心*/
.按钮组{
高度：自动！重要；
}
div标签，
.按钮组{
/*定心*/
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-o变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}

测试1




测试2

这也会使文本垂直居中吗？这只会使文本水平对齐。哎呀。。很抱歉我想我回答得太快了……如果你的框的宽度是可变的，你可以将左边的边距设置为25%，右边的边距设置为25%，效果很好。