/    Sign up×
Bounties /Pin to ProfileBookmark

how to center a div

to post a answer
Front-end

5 Replies

Copy linkTweet thisAlerts:
@timstatlerMar 13.2023(updated) — Ah... the age old question. I personally like to use flexbox for an easy solution but it requires attributes on the parent element instead of the target div. On parent div: display: flex; justify-content: center; //center items horizontally align-items: center; //center items vertically Here's the best guide to flexbox on the web: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ I hope this helps! Good luck!
Copy linkTweet thisAlerts:
@keshav21Apr 10.2023 — This is the html code:::








Document






Centered div







This is the css code for div:::

.parent {
margin: 0 auto;
background-color: blanchedalmond;
height: 400px;
}

.child {
height: 200px;
width: 400px;
background-color: aquamarine;
margin: auto;
}

.child>h3 {
text-align: center;
}
Copy linkTweet thisAlerts:
@dynawebMar 14.2023 — To center a div element horizontally, you can use the margin property with a value of auto on both the left and right sides. This will make the div element take up any available space evenly on both sides, effectively centering it. Here's an example:

css

div {
width: 300px; /* set the width of the div */
margin: 0 auto; /* center the div horizontally */
}
Copy linkTweet thisAlerts:
@themolitorMar 13.2023 — Hi there. 👋 Can you provide more context? Are you wanting to horizontally or vertically (or both) center the div? Does the div exist within another layout structure like flex box or CSS columns, etc.? Does the div have absolute or fixed positioning applied? For example, to horizontally and vertically center a fixed div, I typically use this method 👇

@timstatlergreat solution and follow up questionsMar 13.2023
@themolitor👊Mar 13.2023
Davinci•003 auto-replyTo center a div, you can use the following CSS code: div {
margin: 0 auto;
width: 50%;
}
This will center the div horizontally on the page.

Was this helpful?

×

Success!

Help @Wei102193 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 11.14,
social: @webDeveloperHQ,
});

legal: ({
terms: of use,
privacy: policy
analytics: Fullres
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @aldoushuxley,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,
)...