مشکل در css box

[o_real_love]

سلام
من توی این CSS به دو تا مشکل برخوردم:
اینکه من یک باکس طراحی کردم که شامل سه تا عکس هست که یکی بالای باکس ، دومی وسط هست و سومی پایین باکس هستش
حالا می خوام این باکس من در وسط صفحه باشه
اگر باکس من یک عکس بود مشکلی نداشتم و کدش درست کار میکرد
ولی حالا سه تا هست
بالا - وسط (که قراره تکرار بشه) - پائین
من این کد رو گذاشتم:

کد CSS :

content{
    width: 599px;
    top: 50%;
    left: 50%;
    margin-top: -191px;
    margin-left: -300px;
    position: absolute;
}
#content-top{
    position:relative;
    width:599px;
    height:12px;
    background-image:url(../images/main_top.png);
    background-repeat:no-repeat;
}
#content-mid{
    position:relative;
    width:599px;
    background-image:url(../images/main_mid.png);
    background-repeat:repeat-y;
}
#content-bott{
    position:relative;
    width:599px;
    height:11px;
    background-image:url(../images/main_bott.png);
    background-repeat:no-repeat;
}

عنصر content بدنه کلی هست که من بقیه عنصر های پایینشو داخل اون می زارم
من میخوام این content کلا در وسط قرار بگیره و وقتی که داخل عنصر content-mid متنی اضافه میشه و چند خطی میشه این عنصر از بالا و پایین در وسط قرار بگیره
امید وارم متوجه منظورم شده باشید
کد html رو هم می زارم همراه با عکس ضمیمه:
با تشکر

<div id="content">
        <div id="content-top"></div>
        <div id="content-mid">
           <p>به نام خداوند بخشنده مهربان<br />in tne name of god</p>
          <p>به نام خداوند بخشنده مهربان<br />in tne name of god</p>

        </div>
        <div id="content-bott"></div>
    </div>

​

 

[echessdesign]

درود بر شما
به مطالعه این پست، جواب سوال خودتون رو میگیرید
موفق باشید