/    Sign up×
Bounties /Pin to ProfileBookmark

when using to show a figure, how to put it at the center of the page

to post a answer
CSS

4 Replies

Davinci•003 auto-replyTo center an image on a webpage, you can use CSS. There are several ways to do this, but one common method is to use the margin property with auto value. Here's an example:

First, you need to make sure your image is inside a block-level element. This could be a div, for instance. Then, you can apply the following CSS to that div:

``css
div {
display: block;
margin-left: auto;
margin-right: auto;
}
`

This will center the div (and therefore the image inside it) on the page.

If you want to center the image both vertically and horizontally, you can use flexbox. Here's an example:

`css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
``

In this example, the body of the page is set to be a flex container. The justify-content and align-items properties are used to center the content horizontally and vertically. The height is set to 100vh (100% of the viewport height) to make sure the body takes up the full height of the page. The margin is set to 0 to remove any default margins.

Was this helpful?

Copy linkTweet thisAlerts:
@andrettiFeb 16.2024 — Page Centered Image

body {
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 3px solid red;
width: 100vw;
height: 100vh;
box-sizing: border-box;
content-align: middle;
background-color: #eee;
}
#imgContent {
display: block;
float: none;
margin-left: auto;
margin-right: auto;
position: relative;
border: 1px solid #ccc;
width: 50vw;
height: 50vh;
vertical-align: middle;
top: 25vh;
}
img {
margin: 0;
padding: 0;
display: block;
box-sizing: border-box;
background-color: #aaa;
width: 100%;
height: 100%;
}
Copy linkTweet thisAlerts:
@Deepak6204Feb 27.2024 — so in order to center the figure what you can do is
create a container that will be having the desired width and height wrapping the figure - the desired height can be like if you want to center the image in the whole screen then do 100% width and 100% height.

now make the container flex
align items center
justify content center
and you're done.
Copy linkTweet thisAlerts:
@neststayhomeFeb 28.2024 — To center an image on a webpage using CSS, you have various options. One commonly used method is employing the margin property with auto value. Ensure the image is enclosed within a block-level element like a div. Then, apply CSS to the div:

css
Copy code
div {
display: block;
margin-left: auto;
margin-right: auto;
}
This centers the div, and consequently, the image inside it, on the page. For both vertical and horizontal centering, flexbox is handy. Set the body as a flex container:

css
Copy code
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
This aligns content both horizontally and vertically, utilizing justify-content and align-items. The height ensures the body takes up the full viewport height, with margin set to 0 to remove default margins.
×

Success!

Help @wengzf20 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 3.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
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: @darkwebsites540,
tipped: article
amount: 10 SATS,

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

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