How to align center div element

Question

I have some layout design,

And i want to align the div with id:#middle to center.

I put the background color to green on this div.

also i want to remain current state of layout like scroll bars, size, etc, ...

What is the best way to implement this?

I attached snippet of my code and jsfiddle as below.

JSFiddles: https://jsfiddle.net/crisply/yr8he13g/8/

Please refer this and give me some advices.

Thank you in advance.

<body>
<form method="post" action="./" id="form1" class="AspForm">

    <div id="header">
        <div id="top">
            <div id="logo">
                Logo
            </div>
            <div id="pageInfo">
                <div id="pageTitle">Title</div>
                <div id="pageDesc">Description</div>
                <div id="samplingInfo">Informations</div>
            </div>
        </div>
        <div id="menu">
            Menu
        </div>
    </div>


    <div id="content">
        <div id="middle">
            contents
       </div>
    </div>


    <div id="footer">
        <div id="copyright">
            Copyright &copy; 2015 eZRobotics. All rights reserved.
        </div>

        <div id="loginState">
            <table>
                <tr>
                    <td valign="top">
                        <div id="username">admin</div>
                    </td>
                    <td>
                        logout btn
                    </td>
                </tr>
            </table>
        </div>
    </div>    
</form>
</body>

here is css

html, body {
    /*font-size: 12px;*/
    font-family:'Tahoma', 'Segoe UI', Verdana !important;
}
body {
    height:100%;
}
div {
    box-sizing: border-box;
}
/* -- header ----------------------------------------------- */
 #header {
    position:absolute;
    left:0px;
    right:0;
    top:0;
    height:90px;
    /* TOP height + menu height*/
}
#top {
    height: 60px;
}
#logo {
    padding: 15px;
    height: 30px;
    width: 200px;
}
/* Title & sampling information */
 #pageInfo {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 40px;
    margin: 10px;
    text-align: center;
    vertical-align:central;
}
#pageTitle {
    font-size: 23px;
    font-weight: bold;
    font-family: Tahoma, 'Segoe UI', Verdana;
}
#pageDesc {
    font-size: 14px;
    color: #666;
}
#samplingInfo {
    position: absolute;
    bottom: 0px;
    right: 0px;
    text-align: right;
    font-size: 13px;
}
#menu {
    height: 30px;
    background-color: #666666;
    text-align: center;
}
/* -- ccontent ----------------------------------------------- */
 #content {
    top:90px;
    /* header height */
    bottom:24px;
    /* Footer height */
}
/* content */
 #left {
    position:absolute;
    top: inherit;
    /* header height */
    bottom: inherit;
    left:0;
    width:200px;
    padding: 10px 10px 10px 10px;
}
#right {
    overflow:auto;
    overflow-y: scroll;
    position:absolute;
    top: inherit;
    /* header height */
    bottom: inherit;
    left:200px;
    right:0;
    padding: 10px 10px 10px 0px;
}
#middle {
    overflow-y: scroll;
    position:absolute;
    top: inherit;
    bottom: inherit;
    left:0;
    right:0;
    padding: 10px 10px 10px 10px;
    max-width: 940px;
    background-color: green;
}
/* -- footer ----------------------------------------------- */
 #footer {
    position:absolute;
    left:0px;
    right:0;
    bottom:0;
    height:24px;
    line-height: 24px;

    overflow:hidden;
    background-color: #666666;
    color: #eee;
    font-size: 13px;
}
#copyright {
    text-align: right;
    position: absolute;
    top: 0px;
    left: 0px;
    padding-left: 5px;
    /*background-color: blue;*/
}
#loginState {
    position: absolute;
    top: 0px;
    right: 0px;
    /*background-color: green;*/
}
#username {
    border: 1px solid #C5C5C5;
    height: 18px !important;
    line-height: 18px;
    font-size:13px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 5px;
}
/* Table */
 .tbl {
    width:100%;
    height:100%;
    /*border:1px solid #000;*/
    border-collapse:collapse;
}
.tbl th, td {
    /* border:1px solid #000; */
}
.tbl th {
    background-color:#eee;
}

possible duplicate of [How to align a
to the middle of the page](http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page) — Gaurav Dave, Apr 01 '15 at 06:19

score 1 · Accepted Answer · answered Apr 01 '15 at 06:17

1

CSS

#middle {
  overflow-y: scroll;
  position: absolute;
  top: inherit;
  bottom: inherit;
  left: 0;
  right: 0;
  padding: 10px 10px 10px 10px;
  max-width: 940px;
  background-color: green;
  margin: 0 auto;
}

DEMO

answered Apr 01 '15 at 06:17

Kawinesh S K

3,148
1
16
29

Thank you for you answer, I have one more question. – user2423434 Apr 01 '15 at 06:24
I add margin: 0 auto; to middle css, But it does'nt work in IE (work well on firefox and chrome). How can i fix this?? – user2423434 Apr 01 '15 at 06:26
1

@user2423434 http://stackoverflow.com/questions/662341/using-margin-0-auto-in-internet-explorer-8 check this out. – Kawinesh S K Apr 01 '15 at 06:31
Could you please edit my sample code to work well on ie?... I did't not understand the concept of the link that you gave me... – user2423434 Apr 01 '15 at 06:57
1

@user2423434 for this to work fine u need to specify `width:some-value in px or %` in the `#middle.` https://jsfiddle.net/yr8he13g/26/ – Kawinesh S K Apr 01 '15 at 07:10
1

Hmm.. I do not want to fix the size of width, If the width is fixed, When you reduce the width of the browser, horizontal scroll bar appears in the browser not on middle div. I want to remain this unfixed width css. Is there another solution?.. Thank you so much for you help. Please refer my edited jsfiddles (https://jsfiddle.net/yr8he13g/29/) – user2423434 Apr 01 '15 at 07:31

score 1 · Answer 2 · answered Apr 01 '15 at 06:18

1

Just add margin: 0 auto to #middle DEMO

#middle {
  overflow-y: scroll;
  position: absolute;
  top: inherit;
  bottom: inherit;
  left: 0;
  right: 0;
  padding: 10px 10px 10px 10px;
  max-width: 940px;
  background-color: green;
  margin: 0 auto;
}

answered Apr 01 '15 at 06:18

Gildas.Tambo

22,173
7
50
78

score 0 · Answer 3 · answered Apr 01 '15 at 06:18

0

Try -

#middle{
  text-align: center;
}

Hope this helps!

answered Apr 01 '15 at 06:18

Subha

1,051
1
6
12

score 0 · Answer 4 · answered Apr 01 '15 at 06:20

0

Try text-align:center; for your #middle

answered Apr 01 '15 at 06:20

Alexander Lisitsyn

121
7

Hafeez Hamza · Answer 5 · 2015-04-01T06:59:41.610

0

Add this lines at the bottom of your css, It will work

@media screen and (min-width: 940px){
    #middle {
        left:calc(50% - 470px);
    }
}

https://jsfiddle.net/7aL3v56d/embedded/result/

edited Apr 01 '15 at 06:59

answered Apr 01 '15 at 06:26

Hafeez Hamza

1
2

How to align center div element

5 Answers5