[React] ReactPlayerを使用して表示した動画を中央に配置したい

Question

• やりたいこと

ReactPlayerを使用して表示した動画を中央に配置したいです

• 実施したこと

CSSで text-align: center;を使用して適用しましたがReactPlayer以外の要素が中央に配置され、ReactPlayerは中央に配置されませんでした。
動画は再生されています。

• 動画を表示しているReactのコード

import React, { Fragment,useReducer,useEffect } from 'react';
import styled from 'styled-components';
import { findMovies } from '../api/movies';
import ReactPlayer from 'react-player'

import {
  initialState,
  moviesActionTypes,
  moviesReducer,
} from '../reducers/movies';



export const MovieShow = ({
    match
  }) => {

  const [state, dispatch] = useReducer(moviesReducer, initialState);

  useEffect(() => {
    dispatch({ type: moviesActionTypes.FETCHING });
    findMovies(match.params.moviesId)
    .then((data) =>
      dispatch({
        type: moviesActionTypes.FETCH_SUCCESS,
       payload: {
         movies: data
       }
       })
      )
  }, [])
  

  return (
    <Fragment>
        <h1>動画</h1>
        {
            <div className='player-wrapper'>
              <p>{state.moviesList.name}</p>
              <ReactPlayer url={state.moviesList.url} id="MainPlay" muted playing loop controls={true} />
            </div>
        }
   </Fragment>
  )
}

• index.cssに記載しているコード

.player-wrapper {
  text-align: center;
}

Answer 1

centerタグで囲んだら中央配置できました