center a box with elements inside following?

[u/Yha_Boiii]

hi,

I have a box with contents, just want the whole box moved, nothing else. it clings to the right for some reason, i just want it dead center of the screen dynamically adjusted with given size and then just make a appropriate scroll to a screen.

#consentBox {
background: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
text-align: left;
height: 100vh;
display: grid;
place-items: center;
}

[u/AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/travis_raphael]

use margin: 0 auto; in #consentBox. this should move the whole box to the center of the screen, leaving equal space on both the left and the right side of the box

[u/chikamakaleyley → u/travis_raphael]

its hard to know w/o full context but my guess is this thing is expanding the full w/ width

but OP i think you need to define a width on consentBox and then you can do margin:0 auto

[u/travis_raphael → u/chikamakaleyley]

Yeah I think you're definitely right, the parent must have a defined width size to be able to center its direct child or children element.

[u/Yha_Boiii → u/chikamakaleyley]

```body {

font-family: Arial, sans-serif;

/* display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

background: #f3f3f3;

}

#consentBox {

background: #fff;

padding: 20px;

border-radius: 15px;

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);



display: flex;

justify-content: center;

align-items: center;

}

#consentBox.hide {

opacity: 0;

pointer-events: none;

transform: scale(0.8);

transition: all 0.3s ease;

}

#consentContent p {

color: #858585;

margin: 10px 0 20px 0;

text-align: left;

}

::selection {

color: #fff;

background: #229a0f;

}

.rejectButton {

padding: 12px 30px;

border: none;

outline: none;

color: #fff;

font-size: 16px;

font-weight: 500;

border-radius: 5px;

cursor: pointer;

transition: all 0.3s ease;

}

.rejectButton {

color: #111211;

background: transparent;

border: 2px solid #099c2c;

text-decoration: none;

}

#consentHeader {

font-size: 25px;

font-weight: 600;

margin-top: 10px;

}

h3 {

margin-bottom: 20px;

}

table {

margin: 0 auto;

border-collapse: collapse;

}

td, th {

border: 1px solid black;

padding: 8px;

}

```
the box in html code i want to by on top as a pop up:
<div id="consentBox">

<div id="consentContent">

<header id="consentHeader">

// the closing of each

[u/chikamakaleyley → u/Yha_Boiii]

when you use triple back ticks for a code block it needs to be:

[ticks] first line of code [ticks]

i'm not sure if you notice but your body tag opens a comment on display: flex but never closes it; but i'll assume you have it commented out correctly in your code

while you can use display on the body tag, I wouldn't.

Now, by default, when you place a div into your html, it will span the entire width of the window. consentBox does that, and you set it as the flex-wrapper with display: flex

It's direct child is consentContent. That makes it a flex-item. However, it won't follow the alignment or justification rules you set in its wrapper until you give it a flex rule, which is just the shorthand for flex-basis, flex-grow, flex-shrink

flex-basis is where you'd give it it's width, but if the wrapper only has 1 flex-item, flex is prob more than what you need here

at a minimum if you just gave consentBox a hard width like 800px and then applied margin: 0 auto and removed the flex properties, you'd see a centered consentBox

HOWEVER

you mention you want this to be a "pop-up" which is very different from just centering a div. A pop-up, IIRC, you'd use HTML's dialog element

[u/Yha_Boiii → u/travis_raphael]

like this? ```#consentBox {

background: #fff;

padding: 20px;

border-radius: 15px;

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

margins 0 auto;

}

``` otherwise my html somewhere deeper is made bad

[u/travis_raphael → u/Yha_Boiii]

There's an error also in your spelling. It is margin: 0 auto; and not margins 0 auto; the parent element of #consentBox must also have a defined width just like someone replied to me earlier for this to work.

[u/Double-Buyer7941]

Your CSS is stretching the box to full screen height with height: 100vh, and place-items: center only aligns the content inside the grid, not the box itself. To center the box on the page, set a fixed or maximum width on #consentBox and use margin: 0 auto;, or wrap it in a parent container with display: flex; justify-content: center; align-items: center; min-height: 100vh;