Align Icon on Center Using Styled Components-CodePudding

I have an icon that I want to align on center. My problem is that, it doesn't align well. I'm using styled components.

Here's my codesandbox CLICK HERE

const Play = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
`;

CodePudding user response：

const Play = styled.div`
  position: absolute;
`;

removed top and left, put VideoBanner, Play inside div, and added some style.

style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center"
        }}

Check here CodeSandbox

CodePudding user response：

The Icon is already at center but from its left edge. For you requirement add transform: translateX(-50%); to your Play

const Play = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
`;

This will translate to left by 50% of its own width

CodePudding user response：

In your example, the play button starts its division from top and left at 50%. For example width of your division is 100px, that division will start at at 50% (center of parent div) to 50% 100px that's why it shows up little bit right aligned.

you have to make your play styled component like:

const Play = styled.div`
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
`;

Here is the example as you want. Please CHECK HERE