how to center an inline div using css?

问题

How can I center an inline div (not its content) using css?

VERY IMPORTANT: the width of the div is unknown (I can not specify it)

回答1:

If by inline you mean, its CSS display property is set to inline then you can center it by giving the immediate parent container a text-align:center

If you mean a div within another div, you can follow this approach if you can add a wrapper and float both:

How to horizontally center a floating element of a variable width?

回答2:

I solved this. You should add new div with text-align:center outside your divlike this

<div style="text-align:center;"> <div>

which not in center with inline display </div></div>

回答3:

This is the easiest and most straightforward solution

.center {
  display: table;
  margin: auto;
}

回答4:

Wrap it into a div that you can specify the width of and then set the margins of the div in question to: margin: 0, auto;

回答5:

you can probably get away with display:inline-block and text-align:center; on the parent element if you want it it to be "blocky". also you'll probably need to give it a vertical-align:top

来源：https://stackoverflow.com/questions/3654399/how-to-center-an-inline-div-using-css