如何在div中居中一个按钮?

我有一个div，宽度为100%。

我想在其中居中一个按钮，我该怎么做呢?

< div风格= "宽度:100%;高度:100%;边框:1px实心"> <按钮type = "按钮" >你好> < /按钮 < / div >

当前回答

适用于大多数情况的超级简单的答案是将margin设置为0 auto并将显示设置为block。你可以看到我在CodePen的演示中如何居中我的按钮

其他回答

要将<button type = "button">在<div>中垂直和水平居中，宽度是动态计算的，就像在你的例子中一样，下面是要做的:

设置文本对齐:居中;到换行<div>:当你调整<div>(或者窗口)的大小时，这将使按钮居中。对于垂直对齐，你需要设置margin: valuepx;对于按钮。下面是计算valuepx的规则: valuepx = (wrappingDIVheight - buttonHeight)/2

这是一个JS Bin的演示。

你可以这样做:

< span style=" font - family:宋体;边框:1px实心"> <input type="button" value="button"> < / div >

或者你可以这样做:

< span style=" font - family:宋体 <input type="button" value="button" style="display: block;保证金:0自动;" > < / div >

第一个将中心对齐div内的所有内容，另一个将中心对齐按钮。

遇到这个，我想我也会留下我使用的解决方案，它利用line-height和text-align: center来做垂直和水平的居中:

点击这里使用JSFiddle

响应式CSS选项，将按钮垂直和水平居中，而不考虑父元素大小(使用数据属性挂钩的清晰度和分离问题):

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

小提琴:https://jsfiddle.net/crrollyson/zebo1z8f/

假设div是#div, button是#button:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

然后像往常一样将按钮嵌套到div中。

推荐文章