0

i have div wrapper with header and container divs and i want to place these in the center of the page.

below is the code,

return (
    <Wrapper>
        <Header><svg/></Header>
        <Content>
            <span>first</span>
            <span> second</span>
            <Actions>
                <button> cancel</button>
            </Actions>
        </Content>
    </wrapper>
);


const Wrapper = styled.div`
    width: 100vw;
    background-color: white;
    height: calc(100vh - 20px);
    position: relative;
`;

const Content = styled.div`
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
`;

 const Actions = styled.div`
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 `;

 const Header = styled.div`
     position: absolute;
     width: 100%;
     display: flex;
     justify-content: center;
`;

how can i make the header and content divs to be in the center of the page using css. could someone help me with this. thanks.

saritha
  • 619
  • 2
  • 12
  • 25
  • [This shows you how you can center things with CSS](https://css-tricks.com/centering-css-complete-guide/) If you need any more help I guess you should post the actual HTML and CSS as a snippet here, the react stuff is irrelevant to your question. – cloned Jul 21 '20 at 12:05
  • https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div.Also there are many post for centering divs and content – d-saurabh Jul 21 '20 at 13:11

0 Answers0