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 strip CSS from a button in a jQuery Mobile dialog

    how to show product info after image in bigger zoom levels

    How to stop CSS Code Display:none for specific id or class?

    How do you get a css box to extend the entire width of the browser window?

    How to use YUI Compressor in Ant build script for javascript and css

    Bootstrap 4 and user details - how to do the “bootstrap” or correct way?

    How to add custom CSS for displaying on mobile screens in WordPress?

    hovering over list item, only one item showing up instead of all

    How would you explain CSS positioning to a human being?

    How can I increase the size of a gomap popup window?

    how to force 100% height on a dynamic drive css fluid/fixed layout

    how to prevent css inherit?

    How to make my words not go under my picture in css

    After adding a “current” class to an active item in a menu using jQuery, how can css changes be made to the container of the item?

    How to Convert SASS on the fly to CSS in Python?

    Selenium: how to define css if webpage has mutiple elements with same name

    How can I inject a static CSS File in GWT like it is done with JS Files?

    How to display CSS files in Django blog?

    How to use scaleable pixels in css

    How to call external CSS in presence of inline and internal?

    How to remove width with center DIV

    How prevent inheriting “position: relative” CSS

    How to implement CSS sprite background into existing Javascript variable?

    How to get a child element to size according to parent's min-height?

    How to place circle and text in one line?

    I need a max-margin CSS property, but it doesn't exist. How could I fake it?

    How hide border on embedded swf

    How get dimension of HTML shadow element via JavaScript

    how do i include css based on screen size of the device

    how to apply css on specific td on first tr