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

How to center a component without knowing its width value. I know that you can position a component in the center by writing this in css:

如何在不知道其宽度值的情况下使组件居中。我知道你可以在css中写一个组件在中心位置:

Width: componentWidth; 
margin: auto;

But in my case it's a generic style (given to different kind of buttons with different with value).

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

Any Help will be appreciated

任何帮助将不胜感激

4 个解决方案

#1

I'd suggest using display:flex and justify-content:center on your container.

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

For example

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

The second container is an example of how to vertically center something, as an added bonus.

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

#2

margin: auto; will work when you have some fixed width defined to your element, if you have dynamic width, you can use transform: translateX(-50%); to center your element horizontally(which I assume is what you want) or you can add translateY(-50%) if you want to center vertically.

保证金:自动;当您为元素定义了固定宽度时,如果您有动态宽度,则可以使用transform:translateX(-50%);水平居中你的元素(我假设你想要的)或者如果你想垂直居中你可以添加translateY(-50%)。

For example:

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

If you want just horizontal centered element, get rid of top: 50% and translateY(-50%) respectively. Just note that it's a good practice to nest your absolute positioned element inside relative positioned element.

如果你只想要水平居中的元素,分别去掉top:50%和translateY(-50%)。请注意,将绝对定位元素嵌套在相对定位元素中是一种很好的做法。

#3

In order for margin: auto to work, you must also have block as the display type. The display type for links and buttons is inline-block by default, so override this with display: block; in your style:

为了使margin:auto工作,您还必须将block作为显示类型。链接和按钮的显示类型默认为内联块,因此使用display:block覆盖它;在你的风格:

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

#4

You can do it without CSS or knowing an elements size using a table if you want to get old school.

如果你想要老上学,你可以不用CSS或者使用表格知道元素大小。

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

Here's an example

这是一个例子

https://jsfiddle.net/gxyyecdy/

#1