Why won't justify-content center my React component that uses display:flex?

Question

Hi I am working on a React project and found a sliding pane library on NPM that I am customizing for my use. I want to center the pane horizontally so I tried adding "justify-content: center" to the flexbox but my component will still not center. I also tried "align-items: center" but that only moves everything inside the panel to the center instead of the panel itself, I tried doing "margin: 0 auto" but that doesn't work either but "margin-left: 50px" does move it. Does anyone know what is preventing it from centering? Here is the CSS and the .js code:

/*custom version of css file found in the react-sliding-pane library*/

.slide-pane {
  display: flex;
  flex-direction: column;
  justify-content: center; /*Why wont this work?!?!*/
  background: #fff;
  opacity: 0.8;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s ease;
  will-change: transform;
}
.slide-pane:focus {
  outline-style: none;
}
.slide-pane_from_right {
  margin-left: auto;
  transform: translateX(100%);
}
.slide-pane_from_right.ReactModal__Content--after-open {
  transform: translateX(0%);
}
.slide-pane_from_right.ReactModal__Content--before-close {
  transform: translateX(100%);
}
.slide-pane_from_left {
  margin-right: auto;
  transform: translateX(-100%);
}
.slide-pane_from_left.ReactModal__Content--after-open {
  transform: translateX(0%);
}
.slide-pane_from_left.ReactModal__Content--before-close {
  transform: translateX(-100%);
}
.slide-pane_from_bottom {
  /* height: 90vh; */
  /* margin-top: 10vh; */
  transform: translateY(100%);
}
.slide-pane_from_bottom.ReactModal__Content--after-open {
  transform: translateY(0%);
}
.slide-pane_from_bottom.ReactModal__Content--before-close {
  transform: translateY(100%);
}
.slide-pane__overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0);
}
.slide-pane__overlay.ReactModal__Overlay--after-open {
  background-color: rgba(0, 0, 0, 0.5);
  transition: background-color 0.5s;
}
.slide-pane__overlay.ReactModal__Overlay--before-close {
  background-color: rgba(0, 0, 0, 0);
}
.slide-pane__header {
  display: flex;
  flex: 0 0 64px;
  align-items: center;
  background: #ebebeb;
  height: 64px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.slide-pane__title-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-left: 32px;
  min-width: 0;
}
.slide-pane .slide-pane__title {
  font-size: 18px;
  font-weight: normal;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0;
}
.slide-pane__close {
  margin-left: 24px;
  padding: 16px;
  opacity: 0.7;
  cursor: pointer;
}
.slide-pane__close svg {
  width: 12px;
  padding: 0;
}
.slide-pane__content {
  position: relative;
  overflow-y: auto;
  padding: 24px 32px;
  flex: 1 1 auto;
}
.slide-pane__subtitle {
  font-size: 16px;
  margin-top: 2px;
}

// Custom version of https://www.npmjs.com/package/react-sliding-pane

import React from "react";
import PropTypes from "prop-types";
import Modal from "react-modal";

var CLOSE_TIMEOUT = 500;
function ReactSlidingPane(_ref) {
  var isOpen = _ref.isOpen,
    title = _ref.title,
    subtitle = _ref.subtitle,
    onRequestClose = _ref.onRequestClose,
    onAfterOpen = _ref.onAfterOpen,
    children = _ref.children,
    className = _ref.className,
    overlayClassName = _ref.overlayClassName,
    // closeIcon = _ref.closeIcon,
    _ref$from = _ref.from,
    from = _ref$from === void 0 ? "right" : _ref$from,
    height = _ref.height,
    // marginTop = _ref.marginTop,
    shouldCloseOnEsc = _ref.shouldCloseOnEsc;
  var directionClass = "slide-pane_from_".concat(from);
  return /*#__PURE__*/ React.createElement(
    Modal,
    {
      ariaHideApp: false,
      className: "slide-pane "
        .concat(directionClass, " ")
        .concat(className || ""),
      style: {
        content: {
          height: height || "auto",
          position: "absolute",
          bottom: "0px",
        },
      },
      overlayClassName: "slide-pane__overlay ".concat(overlayClassName || ""),
      closeTimeoutMS: CLOSE_TIMEOUT,
      isOpen: isOpen,
      shouldCloseOnEsc: shouldCloseOnEsc,
      onAfterOpen: onAfterOpen,
      onRequestClose: onRequestClose,
      contentLabel: 'Modal "'.concat(title || "", '"'),
    },
    /*#__PURE__*/ React.createElement(
      "div",
      {
        className: "slide-pane__header",
      },
      // /*#__PURE__*/ React.createElement(
      //   "div",
      //   {
      //     className: "slide-pane__close",
      //     onClick: onRequestClose,
      //   },
      //   closeIcon || /*#__PURE__*/ React.createElement(IconClose, null)
      // ),
      /*#__PURE__*/ React.createElement(
        "div",
        {
          className: "slide-pane__title-wrapper",
        },
        /*#__PURE__*/ React.createElement(
          "h2",
          {
            className: "slide-pane__title",
          },
          title
        ),
        /*#__PURE__*/ React.createElement(
          "div",
          {
            className: "slide-pane__subtitle",
          },
          subtitle
        )
      )
    ),
    /*#__PURE__*/ React.createElement(
      "div",
      {
        className: "slide-pane__content",
      },
      children
    )
  );
}
ReactSlidingPane.propTypes = {
  isOpen: PropTypes.bool.isRequired,
  title: PropTypes.any,
  subtitle: PropTypes.any,
  onRequestClose: PropTypes.func,
  onAfterOpen: PropTypes.func,
  children: PropTypes.any.isRequired,
  className: PropTypes.string,
  overlayClassName: PropTypes.string,
  from: PropTypes.oneOf(["left", "right", "bottom"]),
  width: PropTypes.string,
  // closeIcon: PropTypes.any,
  shouldCloseOnEsc: PropTypes.bool,
};

// function IconClose() {
//   return /*#__PURE__*/ React.createElement(
//     "svg",
//     {
//       xmlns: "http://www.w3.org/2000/svg",
//       viewBox: "0 0 13 22",
//     },
//     /*#__PURE__*/ React.createElement("path", {
//       fill: "currentColor",
//       fillRule: "evenodd",
//       d:
//         "M4 11l8 8c.6.5.6 1.5 0 2-.5.6-1.5.6-2 0l-9-9c-.6-.5-.6-1.5 0-2l9-9c.5-.6 1.5-.6 2 0 .6.5.6 1.5 0 2l-8 8z",
//     })
//   );
// }

export default ReactSlidingPane;

Why won't justify-content center my React component that uses display:flex?

Answers (1)

Related Questions

Why won&#39;t justify-content center my React component that uses display:flex?

Answers (1)

Related Questions

Why won't justify-content center my React component that uses display:flex?