Title rewritten as: Horizontal and vertical centering of elements using Flexbox
P粉748218846
2023-08-20 13:00:18
<p>How to center a div horizontally and vertically in a container using flexbox. In the example below, I want each number to be centered below (row by row). </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
row {
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="flex-container">
<div class="row">
<span class="flex-item">1</span>
</div>
<div class="row">
<span class="flex-item">2</span>
</div>
<div class="row">
<span class="flex-item">3</span>
</div>
<div class="row">
<span class="flex-item">4</span>
</div>
</div></pre>
<p><br /></p>
<p>http://codepen.io/anon/pen/zLxBo</p>
How to center elements vertically and horizontally in Flexbox
Below are two common centering solutions.
One for vertically aligned flex items (
flex-direction: column
), and the other for horizontally aligned flex items (flex-direction: row
).In both cases, the height of the centered div can be variable, undefined, unknown, and unimportant.
The following is the HTML code for both:
CSS (excluding decorative styles)
When flex items are stacked vertically:
Demo
When flex items are stacked horizontally:
Adjust the
flex-direction
rules in the above code.Demo
Center the content of the flexible item
Flexible formatting contextThe scope is limited to the parent-child relationship. Descendants of a flex container beyond its children do not participate in flex layout and will ignore flex properties. Basically, flex properties are not inheritable outside of children.
So you always need to apply
display: flex
ordisplay: inline-flex
to the parent element in order to apply the flex property to the child elements.To center text or other content vertically and/or horizontally, make the item a (nested) flex container and repeat the centering rules.
For more details, see: How to vertically align text in flexbox?
Alternatively, you can apply
margin: auto
to the content element of the flex item.Learn more about flex
auto
margins here: Ways to align flex items (see box #56).Centered multi-line flexible item
When the flex container has multiple lines (due to line breaks), the
align-content
property will be critical for cross-axis alignment.From specification:
For more details see: How does flex-wrap work with align-self, align-items and align-content?
Browser support
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require the vendor prefix . To quickly add a prefix, you can use Autoprefixer. See this answer for more details.
Centering solution for old browsers
See this answer for an alternative centering solution using CSS tables and positioning properties: https://stackoverflow.com/a/31977476/3597276
I think what you want is the following.