How to center the content in a div both top, bottom and left and right? _html/css_WEB-ITnose

I need a web page layout, that is, upper div, left div, right div, and lower div, as shown below.

But I want the content in the right div to be centered within the entire right div. How can I achieve this? Thank you.


index.html
---------------------------------- -------------

This is the Header

This is the sidebar

                                                   < MyDemo.TextString="Use js to interact with controls"; MyDemo.ShowMessage()' value='Use js to interact with controls'/> MyDemo" classid="clsid:D992A002-789B-4094-A846-2BF9DB9DB5C8" width="212" height="104" codebase="setup.exe"> ="TextString" value="Use param to pass control properties"/>                                                                                                 >

This is the footer

< ;/html>


layout.css
---------------------------------- ------------------

body { font-family:Verdana; font-size:14px; margin:0;}

#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px; }
#sidebar { float:left; width:200px; height:500px; background:#cf9;}
#content { margin-left:205px !important; margin-left:202px; height:500px; background :#ffa;}
#footer { height:60px; background:#9c6;}


Reply to discussion (solution)

Set margin-left, margin-right , margin-top, margin-buttom are auto.

http://aliceui.com/vertical-horizoncal/

The author can try the following style, which can adapt to the size of the browser.

Horizontal centering text-align: center Vertical centering You can manually define the height of the content inside and then use margin:auto