如何在CSS计算值中引用元素宽度？Bootstrap 3按钮居中求助

一、替换硬编码半宽的实现方式 #

方法1：用CSS transform（最省心） #

不用管元素具体宽度，直接靠transform: translateX(-50%)配合left: 50%就能实现自动居中，代码如下：

.kiosk-form .centered {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

这里translateX(-50%)的百分比是相对于按钮自身宽度的，所以不管按钮是300px还是其他宽度，都能精准居中，彻底摆脱硬编码数值。

方法2：用CSS变量配合calc #

要是还是想用calc写法，可以先定义一个宽度变量，后续只需要改这个变量就行：

.kiosk-form .centered {
  --btn-width: 300px;
  width: var(--btn-width);
  margin-left: calc(50% - var(--btn-width) / 2);
}

这样半宽会自动计算，不用重复写150px，维护起来更方便。

二、其他水平居中按钮的方法 #

方法1：直接用Bootstrap3自带类 #

Bootstrap3本身就有现成的居中工具类，不用自己写CSS：

• 要是按钮是行内/行内块元素（默认按钮就是inline-block），给父容器加text-center类就行：

<div class="kiosk-form text-center">
  <button class="btn btn-default">按钮文本</button>
</div>

• 要是按钮设成了块级元素，直接给按钮加center-block类，这是Bootstrap3专门用来居中块级元素的：

<button class="btn btn-default centered center-block">按钮文本</button>

方法2：Flexbox布局（简洁高效） #

如果你的目标浏览器支持Flexbox（现在大部分现代浏览器都支持），给父容器加Flex属性就行：

.kiosk-form {
  display: flex;
  justify-content: center;
}

容器里的按钮会自动水平居中，按钮本身不用加任何额外样式，代码非常干净。

方法3：margin:auto（兼容性拉满） #

如果按钮是块级元素且设置了固定宽度，直接设置左右margin为auto：

.kiosk-form .centered {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

这个方法兼容性极好，老浏览器也能支持，适合需要兼容低版本浏览器的场景。

内容的提问来源于stack exchange，提问作者UnDiUdin