Question 184023 in Html Question posted in
Some basic documentation can be found here.

Html – How can I center content in a react app using css?

.allBooks {
  gap: 30px;
  align-items: center;
  max-width: 100vw;
  height: 100vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.nav {
  flex-grow: 0;
}

In regular HTML and css, I could center the content in a container by setting the max-width to about 1200px,height to 100vh, top and bottom margin to 0, and left and right to auto. However my screen size is bigger now(1920px) Max-width of 1200px doesnt look good. What is the best way to center the content?

Tags:

2

Answers


  1. 0

    To center content in a React app using CSS, you can use various techniques depending on the specific layout and content you want to center. Here are a few common methods:

    1. Centering Text or Inline Elements:
      • Use the CSS text-align: center; property on the parent container to center-align text or inline elements within it.
    // CSS
.container {
  text-align: center;
}

// HTML
<div className="container">
  <p>This text will be centered.</p>
</div>
    1. Centering Block Elements:
      • Use the CSS margin: 0 auto; property with a specified width on a block-level element to horizontally center it.
    // CSS
.container {
  width: 300px;
  margin: 0 auto;
}

// HTML
<div className="container">
  <div>This block element will be centered horizontally.</div>
</div>
    1. Centering Flexbox:
      • Use the CSS Flexbox layout to center content both horizontally and vertically within a container.
    // CSS
.container {
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center; /* vertical centering */
  height: 100vh; /* optional: make the container fill the viewport */
}

// HTML
<div className="container">
  <div>This content will be centered both horizontally and vertically.</div>
</div>
    1. Centering Grid:
      • Use the CSS Grid layout to center content both horizontally and vertically within a container.
    // CSS
.container {
  display: grid;
  place-items: center;
  height: 100vh; /* optional: make the container fill the viewport */
}

// HTML
<div className="container">
  <div>This content will be centered both horizontally and vertically.</div>
</div>

    Remember to adjust the class name (container in the examples above) and CSS properties according to your specific React component and styling needs.

    Login or Signup to reply.
  2. 0

    You can achieve your solution using only display:flex and align-items: center; justify-content: center

    I think the issue comes from the parent element not being defined properly.

    When dealing with a responsive design, I always try to work my way from the top to the bottom.

    Check the html element first then the body and then the children. This way you are sure that by using relative units, you will have the correct responsive behaviour when switching displays.

    Here’s a work i made a while ago showcasing responsive with relative units.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search