CSS trouble getting elements to center both vertically and horizontally using flex

Question

Sorry for the beginner question but i have been stuck on this for a long time. I have am trying to use flex to center align the div.Homepage elements but i cant seem to get anything but the button to align horizontally. I also cant get the text TEST to center. My CSS is below:

body {
    font-family: 'Recoleta';
    color: #FFF;
    background: #111;

}

html, body {
    height: 100%;

}

.Homepage{
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}

.logo-social-image{
    max-width: 20%;
}

My React HTML is below

   return(
            <div className="Homepage">
                <div className="Name-social">
                    {view}
                </div>
                <div className="Pro-button">
                    <OutlinedButtons  isLoading={this.state.isLoading} isLoaded={this.isLoaded} />
                </div>
            </div>
        )

i added it under `.Homepage` but it does not change anything — VickTree, May 31 '19 at 18:40
what is the parent component then? whatever the parent of the content you want to center, needs that css — John Ruddell, May 31 '19 at 18:47
thanks John, i added it to the upper most parent created by react and it worked! The word `TEST` is centered vertically but not horizontally. Do i need to go into the child element to center that? — VickTree, May 31 '19 at 18:52
It could also be that you need to add width: 100%; to .Homepage — bnjmn.myers, May 31 '19 at 19:04

score 1 · Answer 1 · answered May 31 '19 at 18:30

Since you did not provide your HTML, I made an example of how to do it https://jsfiddle.net/L29h8oxs/

Add

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

To the parent div (I think it will be your .Homepage) and it should center the child for you.

score 0 · Answer 2 · answered May 31 '19 at 18:56

0

Just add justify-content: center to the class Homepage.

.Homepage {
  /*Keep your previous style*/
  justify-content: center;
}

answered May 31 '19 at 18:56

AdityaSrivast

1,028
1
10
16

CSS trouble getting elements to center both vertically and horizontally using flex

2 Answers2