Question

如何在不知道其宽度值的情况下使组件居中。我知道你可以通过在css：

中写一个组件来定位中心

Width: componentWidth; 
margin: auto;

但在我的情况下，它是一种通用的风格（赋予不同类型的按钮，具有不同的价值）。

任何帮助将不胜感激

Answer 1

我建议您在容器上使用display:flex和justify-content:center。

例如

HTML

<div class="container">
  <span class="content">Center!</span>
</div>
<hr />
<div class="container2">
  <span class="content2">Center 2!</span>
</div>

CSS

.container {
  display:flex;
  justify-content:center;
  border:solid 1px red;
}

.container2 {
  display:flex;
  height:200px;
  justify-content:center;
  align-items:center;
  border:solid 1px red;
}

Fiddle here

第二个容器是一个如何垂直居中的例子，作为额外的奖励。

Answer 2

当您为元素定义了固定宽度时，

margin: auto;将起作用，如果您有动态宽度，则可以使用transform: translateX(-50%);水平居中您的元素（我假设是您想要的）或者如果您想垂直居中，可以添加translateY(-50%)。

例如：

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  /* specifying x and y separately on purpose so that you understand whats going 
     on and what you can remove what you don't need from the above snippet */
}

Demo

如果您只想要水平居中的元素，请分别删除top: 50%和translateY(-50%)。请注意，将absolute定位元素嵌套在relative定位元素中是一种很好的做法。

Answer 3

要使margin: auto起作用，您还必须使用block作为显示类型。默认情况下，链接和按钮的显示类型为inline-block，因此请在您的样式中使用display: block;覆盖此内容：

.whatever-your-btn-class-is {
  margin: auto;
  width: componentWidth;
  display: block;
}

Answer 4

如果你想上老学，你可以不使用CSS或使用表格了解元素大小。

<table width="100%">
<tr>
    <td align="center"><!-- anything in here will be centered --></td>
</tr>
</table>

这是一个例子

https://jsfiddle.net/gxyyecdy/

如何在不知道Css宽度的情况下使组件居中

4 个答案: