How to align div to center of verital and horizontal


Tags: html,css

Problem :

I want align the div to center.

like this

enter image description here

I have tried margin-top, vertical-align

but they also not work.

I also set the left less than 0px

but the inner div still a 0px of left

If I want the div as above image

how to modify css to make it as above image?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div
{
    border:solid;
}
#outer
{
    position:absolute;
    height:100px;
    width:50px;
    left:50px;
    top:50px;
}
#inner
{
    background:white;
    height:20%;
    width:120%;
    left:-10px;
    margin-top:auto;
    margin-buttom:auto;
    vertical-align:middle;
}
</style>
</head>
<body>

<div id="outer">
    <div id="inner">abc</div>
</div>
</body>
</html>


Solution :

Try this - http://jsfiddle.net/vn6Wx/

#inner
{
    background:white;
    height:40%;
    width:200%;
    position: relative;
    left:-50%;
    top: 25%;
    margin-top:auto;
    margin-buttom:auto;
    vertical-align:middle;
}

    CSS Howto..

    How to create Rectangle With Gradient Color Stripes Border via CSS?

    How to add color to text in my div with code

    How do I position the search box to my specs?

    CSS: How to center element that is bigger then the container?

    How to change CSS when user scrolls past a certain div

    Getting CSS3 PIE.htc to show up in child elements when used on parent element

    How to move stacked columns up (using bootstrap but any css will do)

    How to show only half of bootstrap glyphicon with css

    How can I align divs in a row rather than vertically?

    How to reduce shiny interactive rmarkdown margins?

    Only Lower Half Of The Border Is Shown

    How to make blur effect without white light?

    How do you target div last-child within another div?

    How to display certain content underneath another block of content

    How to force a div to scale at 100% width of the current windows Browser

    How to stretch image in img tag larger than its natural size?

    How to implement fade in effect for CSS checkbox

    Fontawesome: How to control height and width of stacked icons

    How to apply CSS style which will be ignored for tfoot or last TR

    How do I make everything on this page centered and fully responsive for all browsers?

    How to change text from black to white upon hover on background black?

    How to align with css

    How to animate all except one feature with CSS

    How do I reference this textarea and checkbox?

    How do I fix this alignment issue in jQuery & CSS?

    How to style an iframe?

    Generated web font doesn't show dots above Ü

    How to make margin collapsing work with input type=button/submit?

    How to Toggle CSS3 Accordion on Click

    How do you use HTML5 tags while supporting Progressive Enhancement for no-script clients that don't natively recognize unknown elements?