如何水平居中弯曲<div> ?

Question

So what is the proper/correct way to horizontally center the flex <div> ?

 #container { width: 100%; min-height: 100%; }

 <div id="container"> <div className="horizontal-centered">Center this</div> </div>

Answer 1

First change the className to class. Apply justify-content: center; to .horizontal-centered

<div id="container">
  <div class="horizontal-centered">...</div>
</div>

#container .horizontal-centered {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  margin: 0;
  justify-content: center;
}

Answer 2

Center align the text in your container:

#container {
  width: 100%;
  min-height: 100%;
  text-align: center;
}

Then ensure your horizontal margins are set to auto, and the container text is realigned properly.

#container .horizontal-centered {
  flex-wrap: wrap;
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  text-align: left;
}

Answer 3

Try this

 #container { width: 100%; min-height: 100%; padding: 0; margin: 0; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: center; }

 <div id="container"> <div className="horizontal-centered">Center this</div> </div>

Answer 4

Assuming a few things : 1) "className" is a typo and should be class? 2) The '.horizontal-centered' is the item needed to be centered, and isn't the flexbox itself.

The flexbox changes needed here are entirely in the container. It assumes the immediate child to be the flex items. Changes shown below.

 #container { width: 100%; min-height: 100%; background-color:black; height:200px; display:flex; justify-content:center; } #container .horizontal-centered { height:50px; width:50px; background-color: #333; }

 <div id="container"> <div class="horizontal-centered">...</div> </div>

Answer 5

To horizontally center the outermost block, such as a div or article, use the following CSS either in a class or style attribute, either on the body or on a surrounding div:

display: flex; justify-content: center;

So simple.