Placing an element vertically centered on either side of the page

Question

I am having a <div> element and want to set the< div> vertically center aligned to the left or right of the page.

<div id="qrcode">Content</div>

Below is the CSS I tried:

#qrcode{
    position:absolute;
    left:100%;
    margin-top:200px;
    margin-left:-200px;
    width:80px;
    height:80px;
}

But this not work fine when the size of the <div> changes. What should be the properties so that it works regardless of the size of <div>?

Hello downvoter.. can you tell me the reason for your downvote? — Purus, Oct 18 '14 at 15:29
why don't you just use float: left or float: right? and lose the position: absolute. This question really needs more context to get a proper answer! — markt, Oct 18 '14 at 15:30
I did not downvote you. But do you have searched for a solution in the first place? http://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-a-div — Nico O, Oct 18 '14 at 15:31
I know nothing on CSS and just trying to learn with some examples. Please let me know what content you need on this apart from the code. I believe I have provided the required code I have tried. — Purus, Oct 18 '14 at 15:31
Nico: I want to center the div in a page. The example u provided is for div. — Purus, Oct 18 '14 at 15:33
@Purus there are a lot of other examples there, that do not rely on a certain parent item. You always have the `body` element. Here are a few examples: http://jsfiddle.net/41a81061/ — Nico O, Oct 18 '14 at 15:38
@NicoO : Its again aligns the DIV in the center of the page and not the right corner of the page. I have tried to search in the SO. — Purus, Oct 18 '14 at 15:40
@Purus *Right* is not center, that is *right*... Your question is unclear as it is... please elaborate. — T J, Oct 18 '14 at 15:41

T J · Accepted Answer · 2014-10-18T15:58:26.860

If you want to vertically center align an element on the right side of the page you can use the translate technique like:

#qrcode {
  position: absolute;
  top: 50%;
  right: 0; /*or left*/
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  background: hotpink;
}

<div id="qrcode">Content</div>

Basically, top:50% positions the top of the element at the vertical center of the page and translateY(-50%) pushes it 50% upwards on y axis, relative to it's own size - positioning it on the vertical center of the page. right:0 simply positions it at the right side.

score 0 · Answer 2 · answered Oct 18 '14 at 15:32

0

You can easily center the <div> like this:

HTML:

<div id="qrcode">Content</div>

CSS:

#qrcode{
    background: black;
    color: white;
    width:80px;
    margin: 0px auto;
    height:80px;
}

DEMO

answered Oct 18 '14 at 15:32

Fahad Hasan

10,231
4
29
36

I am looking to center the div related to the entire page at the left or right side. But this about div relative to another div. – Purus Oct 18 '14 at 15:34
Based on your edited code, I am looking to center the div at RIGHT or LEFT side. – Purus Oct 18 '14 at 15:37

score 0 · Answer 3 · answered Oct 18 '14 at 15:41

Try this:

position: fixed;
margin: auto;
height: 80px;
top: 0;
bottom: 0;

and add left: 0 or right: 0 depending on where you want it.

.qrcode{
  position: fixed;
  margin: auto;
  height: 80px;
  top: 0;
  bottom: 0;
  background: red;
}
.qrcode.left {
  left: 0;
}
.qrcode.right {
  right: 0;
}

<div class="qrcode left">Content</div>
<div class="qrcode right">Content</div>

Placing an element vertically centered on either side of the page

3 Answers3