CODEWITHSUNDEEP
css
manyu
manyu

Reputation: 485

center alignment of div inside a div both vertically as well as horizontally

I have two divs one inside another. I have given some border to both the divs and I want both the divs to be in the center with respect to the page both horizontally and vertically. I have seen the solutions to similar question but couldn't solve my problem. Please also share good resources from where I can learn about the positioning i.e relative absolute in depth.

Below is my HTML code:

<!DOCTYPE html>
<style type="text/css">
    .outer {
        color:black;
        width: 400px;
        height:400px;
        border: 100px solid;
        border-radius:100%;
        border-color: red blue green yellow;
        position: static;
        margin: auto  auto auto auto;
        top:50%;
    }
    .inner{
        color:black;
        width: 100px;
        height:100px;
        border: 50px solid;
        border-radius:100%;
        border-color: red transparent green transparent;
        position: relative;
        top:50%;
        margin: -50px auto auto auto;
    }
</style>
<html>
    <body>
        <div class="outer">
            <div class="inner">
            </div>
        </div>
    </body>
</html>

Upvotes: 0

Views: 180

Answers (4)

Narppavi
Narppavi

Reputation: 1

A smart way to align a div to center of the page is to use display:table and display:table-cell method.

HTML:

<div class="wrapper"> 
<div class="box"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis pretium arcu, eget semper lacus. Aliquam aliquam, augue non bibendum pretium, felis neque eleifend tortor, ut luctus mi ante vel nisl. Mauris id enim elit.
</p> 
</div> 
</div>

CSS:

html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table;}

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

.box {
background-color: red;
display: inline-block;
text-align: center;
padding:10px;
width: 100px;
height:auto;
}

See the live demo:

http://jsfiddle.net/Narppavi/ej6yL/

Upvotes: 0

Bob
Bob

Reputation: 1497

The actual height & width of your div is 200px including borders. So in your inner you will set the left & top margin to actual size/2 :

.inner{
  ...
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;


}

Upvotes: 0

Config
Config

Reputation: 1692

Horizontal centering most of the time is not much of a problem. Adding a margin: 0 auto style to a div will mostly do what you want.

Vertical centering however seems to be a bit more complex. A list of 6 options for vertical centering is given here: http://www.vanseodesign.com/css/vertical-centering/

Also note the Additional Resources section in that article, which lists some good references as well.

Upvotes: 1

chipcullen
chipcullen

Reputation: 6960

IF you know the sizes of both boxes, and they won't change, you can use this:

.outer {
  color:black;
  width: 400px;
  height:400px;
  border: 10px solid;
  border-color: red blue green yellow;
  position: absolute;
  margin: -200px  auto auto -200px;
  top:50%;
  left: 50%;
}
.inner{
  color:black;
  width: 100px;
  height:100px;
  border: 5px solid;
  border-color: red transparent green transparent;
  position: absolute;
  top:50%;
  left: 50%;
  margin: -50px auto auto -50px;
}​

Note I took out the border radius and narrowed the border size to make the point clearer.

Basically, you can use absolute positioning with relative units (%), but use a fixed negative margin that is half the size of the box.

See the JS Fiddle

Upvotes: 1

Related Questions