Question: This question is a little hard to explain: I have an image at the bottom of a page. On click of that image I load the next page via ajax without removing that image. How can I crop out or remove all the space above the image? Or, maybe a better way to put it is how do I scroll to top unnoticeably? 

[Here is perfect example](https://bonnemarque.se/case/jdco/) of what I'm trying to accomplish - go to the bottom of the page and see what happens when you click the image. What is the concept behind that?

Answer: 
You can make your flex item a nested flex container, and then use flex properties to center the text.

In other words, apply `display: flex` to `.flx-search-item`.

```
.flx-search-item {
     display: flex;            /* new */
     align-items: center;      /* new */
     justify-content: center;  /* new */

     flex-grow: 1;
     text-align: center;
     /* display: block; <-- remove this */
     flex: 0 0 350px;
     height: 50px;
  }

```

[**Revised Demo**](https://jsfiddle.net/c60t2r2k/2/)

Remove `display: block` or it will override `display: flex`.

Also, `flex-grow: 1` is being overridden by `flex: 0 0 350px`, which is the shorthand for `flex-grow`, `flex-shrink`, `flex-basis`.

If you want `flex-grow: 1`, get rid of that line and just use `flex: 1 0 350px`.
Just add a line-height:50px; to .flx-search-item.

EDIT (sample with @media query) :

```
.flx-search-item {
     text-align: center;
     flex: 0 0 350px;
     height: 50px;
     line-height: 50px;
}

@media (max-width:1065px) {
    .flx-search-item
    {
        flex: 0 0 700px;
    }
}
@media (max-width:710px) {
    .flx-search-item
    {
        flex: 0 0 350px;
    }
}

```