CSS to center entire relative body horizontally, without wrapper or scrollbars?

Question

What CSS will center the entire relatively-positioned body of ANY webpage, with no scrollbars, and equal clipping of overflow content on left and right of the viewport?

When the page renders, if the widest element is wider than the viewport, then i want the left and right sides of the content to "fall off" the sides of the screen. Overflow on both left and right should be clipped/hidden.

The width of the content is unpredictable, and may often be wider than the viewport. We should always see the middle slice, no scrollbars.

Not duplicate question

Please don't mark "duplicate". No answer in these questions achieves my desired aim. I've tested every one of them.

How to align entire html body to the center?

align body to center - centering body

How to center body on a page?

Unlike common answers in the above questions, I do not have the option to wrap the content in a div. I can only work with the html and body tags.

Required HTML:

This question doesn't allow to alter this html. Your CSS answer should work with any webpage. These element are just examples-- there would be many more, unpredictable elements in the html. You cannot wrap the content in a container div. Your CSS answer should show the center slice of the page, clipping off to the left and right whatever content doesn't fit on the screen.

<html>    
    <body>
        Overflow to left
        <div id="wider">Center-screen</div>
    </body>    
</html>

Required CSS

#wider {
    width: 10000px;
    border: 1px solid black;
    text-align: center;
}

body {
    position: relative;
}

You can't change this CSS, only add new CSS. Need position:relative on body.

The #wider element is just an example of wide content. The real-world usage would include many more elements of unpredictable width.

Output should render something like the image below, with no scrollbars. The text "Overflow to left" should be clipped off the screen to the left. The words "Center-screen" should be dead-center, horizontally.

Non-working solution 1:

The answer below, from a similar question, doesn't appear achieve my goal:

html,
body {
  height: 100%;
}

html {
  display: table;
  width: 100%;
}

body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Non-working solution 2:

Another answer from a similar question doesn't seem to work for my scenario:

body {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

Fiddle:

This fiddle contains my HTML, along with the above failed answer. Feel free to test your answer in this fiddle.

Desired output from HTML above:

krimaeus · Answer 1 · 2019-07-22T09:36:31.157

1

If I understand you correctly, you could do something like this:

body {
  overflow-x: hidden;
}

#wider {
  width: 10000px;
  border: 1px solid black;
  text-align: center;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

Overflow to left
<div id="wider">Center-screen
</div>

edited Jul 22 '19 at 09:36

answered Jul 22 '19 at 08:32

krimaeus

349
1
7

Thx, but that just left-aligns everything, and shows a horiz scrollbar. – johny why Jul 22 '19 at 09:11
2

Whoops, I misread the CSS as being part of your required code. Anyway, could you make a rough picture of what you're trying to achieve? – krimaeus Jul 22 '19 at 09:20
picture added to question – johny why Jul 22 '19 at 09:29
OK, so what's the point of the 'Overflow to left' part? Because if it weren't there, it would be easy to center that huge div, and hiding the scrollbars is just a matter of setting `overflow-x` in the body to `hidden`. – krimaeus Jul 22 '19 at 09:35
In my use-case, i just want to see the center slice of the body, and clip off the sides. I know that means cutting of content, and that's ok. It's the center slice that matter, in this case. – johny why Jul 22 '19 at 09:37
That is what my answer is already doing. What I don't get is, what's the purpose of 'Overflow to left' and what is that supposed to represent. Because if you want it cut off, you need to place it inside your div and align it to the left. – krimaeus Jul 22 '19 at 09:43
Added to the question: This question doesn't allow to alter this CSS. You can only add new CSS. This element is just an example of wide content. The real-world usage would include many more elements of unpredictable width. – johny why Jul 22 '19 at 09:47
i forgot to say, need position:relative on body. – johny why Jul 22 '19 at 19:53

score 1 · Answer 2 · answered Jul 22 '19 at 11:11

1

You Just add text align center in css code

HTML

<html>
  <body>
  Overflow to left
    <div id="wider">Center-screen</div>
  </body>
</html>

css

#wider{
  text-align:center;
}

answered Jul 22 '19 at 11:11

Ranjith v

975
3
11

As mentioned in the question, you can't change that particular CSS. The only CSS you can change is and . My #wider element is just a sample-- i'm looking for CSS that will work with ANY website. -thx – johny why Jul 22 '19 at 11:41
can you pls tell me what kind of issue faced and share me your code. i will fix – Ranjith v Jul 22 '19 at 11:50

score 1 · Accepted Answer · answered Jul 22 '19 at 11:53

1

You just need absolute positioning + transform:translate style centering.

#wider {
  width: 10000px;
  border: 1px solid black;
  text-align: center;
}

body {
  position:absolute;
  left:50%;
  transform: translate(-50%);
  margin:0;
  overflow-x:hidden;
}

<html>
  <body>
  Overflow to left
    <div id="wider">Center-screen</div>
  </body>
</html>

answered Jul 22 '19 at 11:53

Alohci

70,004
12
103
143

Great job! You win! Brilliant! However.... i made a mistake. I need my body to be position:relative. I forgot to put that in the question. My bad! :( Can you solve it? Can put CSS into ? – johny why Jul 22 '19 at 13:35
Yes, you can move the CSS of the solution to the html element instead. It might depend on why you need body to be position:relative though. – Alohci Jul 22 '19 at 15:09
When i said "put CSS into ", i meant "Can you think of any CSS to apply to the HTML tag, to solve my question?" – johny why Jul 22 '19 at 19:46
Unfortunately, can't remove requirement for position:relative on body. – johny why Jul 22 '19 at 19:52
Yes I understood your question. The same CSS that I have shown for the body element can be applied to the html element instead, (except margin:0 which should be still be applied to body) and you will get the same result. The body element can then have position:relative applied as you wish. – Alohci Jul 22 '19 at 23:48
Would be awesome to add your last comment to the answer. – johny why Jul 30 '19 at 01:04

score 0 · Answer 4 · answered Jul 22 '19 at 08:35

0

In order to achieve horizontal centered body,you will need to to use elements inside a div with these properties "flex-center flex-column",

<h5 class="animated fadeIn mb-3">Hello Mate.</h5>

<p class="animated fadeIn text-muted">Mostafa Harb</p>

answered Jul 22 '19 at 08:35

Lord Legolas

9
2

Hello, mate. I can't use a wrapper/container. Can only use HTML and body tags. I can't see your CSS. – johny why Jul 22 '19 at 09:12
then the thing you can do is to give a div a 100% width and some height and then put a div in this div and give then style float:center; and that's all should go perfect with you. – Lord Legolas Jul 22 '19 at 09:18
or you could do in the entire div these style properties : align-items:center;align-contents:center;justify-items:center;align-items:center; and this could also do what you want. – Lord Legolas Jul 22 '19 at 09:20
Hello
– Lord Legolas Jul 22 '19 at 09:30
Thx, but it looks like you didn't use my 'required html'. Also, you're using a container div, which as i mentioned we cannot do for this question. Also, think you need to put your answer in the answer box, not in a comment. – johny why Jul 22 '19 at 09:31

score 0 · Answer 5 · answered Jul 22 '19 at 09:36

0

these properties are what you want to achieve your aim :

<html>
<style>
.entire-div{
    text-align: center;
    align-items:center;
    align-content:center;
    justify-items:center;
    align-items:center;
}
</style>
<body>
    <div class="entire-div">
        <h1>Hello</h1>
    </div>
</body>
</html>

answered Jul 22 '19 at 09:36

Lord Legolas

9
2

Thx, but as i mentioned in the question, i cannot use a container div, as you're doing in this answer, your ".entire-div". Also, you're still not using my required HTML :) Please check the question, thx. – johny why Jul 22 '19 at 09:39
ok,can you please tell me exactly what you want since its the fifth time i read your question i couldn't get what you want.Regards. – Lord Legolas Jul 22 '19 at 09:47
This question doesn't allow to alter my HTML or CSS. You can only add new CSS. The elements in my HTML are just examples of wide content. The real-world usage would include many more elements of unpredictable width. – johny why Jul 22 '19 at 09:50
i forgot to say, need position:relative on body. – johny why Jul 22 '19 at 19:53

CSS to center entire relative body horizontally, without wrapper or scrollbars?

5 Answers5

Hello