Position div horizontally center

Question

I want to position a div at the center of the screen. The issue is when the div is small, from left 45% looks fine but when the div is longer(ie more width), I need to make it from left 30%

Is there a smart way to position the div at the center based on the size of div.

body {
background:blue;
}

.box  {
position: absolute;
top:10px;
left:30%;
background:white;
padding:10px;
border-radius:10px;
}

<div class="box">
This is long div so need left = 30 percent
</div>

score 2 · Accepted Answer · answered Oct 22 '22 at 17:32

2

You can align center the component using display: flex; attribute.

css flex

body {
flex: 1;
background:blue;
display: flex;
justify-content: center;
}

.box  {
position: absolute;
top:10px;
background:white;
padding:10px;
border-radius:10px;
}

<div class="box">
This is long div so need left = 30 percent
</div>

answered Oct 22 '22 at 17:32

ChanHyeok-Im

541
3
11

1

+1 Very creative way of doing this. I usually just position in as `left: 50%` and `margin-left: -[[width / 2]]`, but I'll keep this in mind. – Parking Master Oct 22 '22 at 17:34
I'm using the div as a widget...So the issue is I can't give body {flex} since it will affect the hosting site. Is there any other fix? – Tomaz_ Oct 22 '22 at 19:29
You can wrapping a widget element by flex element. – ChanHyeok-Im Oct 23 '22 at 08:26

score 1 · Answer 2 · answered Oct 22 '22 at 17:32

1

You can center it horizontally that way:

.box  {
   position: absolute;
   top:10px;
   left:50%;
   background:white;
   padding:10px;
   border-radius:10px;
   transform: translateX(-50%);
}

answered Oct 22 '22 at 17:32

Mohammed Ahmed

435
2
11

kimia shahbaghi · Answer 3 · 2022-10-22T19:43:43.933

1

to center a div horizontally, a simple solution is to set its margin to "auto":

body {
background:blue;
}

.box  {
width: fit-content;
margin: auto;
background:white;
padding:10px;
border-radius:10px;
}

edited Oct 22 '22 at 19:43

answered Oct 22 '22 at 17:38

kimia shahbaghi

302
7

Position div horizontally center

3 Answers3