CSS Flexbox Vertically/Horizontally Center Image Without Explicitely Defining Parent Height

CSS flexbox vertically/horizontally center image WITHOUT explicitely defining parent height

Without explicitly defining the height I determined I need to apply the flex value to the parent and grandparent div elements...

<div style="display: flex;">
<div style="display: flex;">
 <img alt="No, he'll be an engineer." src="theknack.png" style="margin: auto;" />
</div>
</div>

---

If you're using a single element (e.g. dead-centered text in a single flex element) use the following:

align-items: center;
display: flex;
justify-content: center;

How to vertically align an image inside a div

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {

    height: 25px;      /* Equals maximum image height */

    width: 160px;

    border: 1px solid red;

    white-space: nowrap; /* This is required unless you put the helper span closely near the img */

    text-align: center;

    margin: 1em 0;

}

.helper {

    display: inline-block;

    height: 100%;

    vertical-align: middle;

}

img {

    background: #3A6F9A;

    vertical-align: middle;

    max-height: 25px;

    max-width: 160px;

}

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />

</div>

<div class="frame">

    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=17px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=15px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=13px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=11px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=9px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=7px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=5px />

</div>

<div class="frame">

    <span class="helper"></span>

    <img src="http://jsfiddle.net/img/logo.png" height=3px />

</div>

Vertical Center with Flexbox and alignment of child items

If you want to show elements in column you need to use flex-direction: column style property.

.parent{

   display: flex;

   flex-direction: column;

   align-items: center;

   justify-content: center;

}

<div class="parent">

   <h1>Title</h1>

   <p>Paragraph one.</p>

   <p>Paragraph two.</p>

</div>

How to prevent overflowing flexbox without giving explicit sizes

I managed to somehow fulfil the first part of your question:

Codepen

The key to contain the SVG is resetting its behaviour with position: absolute and adding align-self: stretch; to its parent, so the SVG has the maximum size information of its parent as a basis.

As of the second part, I'm not sure what you want to achieve. The layout can't switch freely between row and columns, except with fixed breakpoints.

Vertical and horizontal align anchor element, area clickable 100% of parent

Solved it, thanks to @insertusernamehere, an <a/> inside a <button/> isn't valid HTML.
That helped simplify the markup to be an anchor tag that looks like and interacts as a button, instead of having nested elements.

--> simply set the anchor tag as a block-level element so you can specify width and height, then use line-height.

.medium-button__link {

    display: block;

    width: 200px;

    height: 48px;  

    text-align: center;

    line-height: 48px;

    background: #3a66db;

    color: #fff;

    font-family: 'OpenSans-Regular';

    font-size: 1em;

    border-radius: 4px;

    text-decoration: none;

}

  

<a class="medium-button__link" href="https://sirthisisawendys.com">

    Clickable link

</a>

How can I make Flexbox children 100% height of their parent?

Use align-items: stretch

Similar to David Storey's answer, my workaround is:

.flex-2 {
    display: flex;
    align-items: stretch;
}

Note that height: 100% should be removed from the child component (see comments).

Alternatively to align-items, you can use align-self just on the .flex-2-child item you want stretched.

---

Related Topics