Content positioned in Y and X middle

Question

I don't want my content positioned in middle along the X axis, I want the content in the middle of the Y axis to.

In my CSS I've used the following to prevent the page becoming any bigger

html { overflow-y: hidden; overflow-x: hidden }

and below is what I want to achieve. Just as an example, imagine a box in the middle. I believe this can be done with JavaScript, I'm just not sure how.

So the image above shows the box in the middle on both X and Y axis. Please don't post how to position it in the middle along X Axis like this website as that's not what I would like.

Possible duplicate of [center content in div with CSS](http://stackoverflow.com/questions/4374650/center-content-in-div-with-css) — Paul, Feb 25 '16 at 20:44

score 1 · Accepted Answer · answered Feb 25 '16 at 21:00

Set your div or box's CSS properties to..

div {
  /* These first 3 can change */
  background: red;
  width: 100px;
  height: 100px;
  /* The important stuff below */
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;

}

See it in action in the JS Fiddle

nick · Answer 2 · 2016-02-25T22:11:00.720

0

You could use the following function to dynamically center along either axes relative to the parent element. Set the parent container's overflow property to hidden and set the child element's marginTop value to the value of: center(child width, parent width)

center= function(Win,Wout){
  return (Wout-Win)/2
}

edited Feb 25 '16 at 22:11

answered Feb 25 '16 at 20:49

nick

1,197
11
16

score 0 · Answer 3 · answered Feb 25 '16 at 21:02

You can do this with javascript as Nick said, but is CSS also an option? If you want to vertically center a child element with CSS, you can do so as shown in this jsfiddle https://jsfiddle.net/bjf10vyj/ The parent position must be relative, and then the child

position: absolute;    
top: 50%;
transform: translateY(-50%);

Content positioned in Y and X middle

3 Answers3