Align content in the middle of the page

Question

I've this website http://n-restaurant.nowcommu.myhostpoint.ch/reservation.html

How can i place the content perfectly in the middle? I mean this:

<section class="section-content section-intro" id="section-intro">
           <div class="row">
             <div class="span12 reservation">
                 <h5>Reservation unter:</h5>
                 <p>reservation@restaurant-nigrum.com<br>Tel.: +49 7221 / 3979006</p>
                <!-- <p>Restaurant Nigrum<br>Baldreitstrasse 1<br>76530 Baden Baden<br>Tel.: +49 7221 / 3979006<br>Fax: +49 7221 / 3979007</p>-->
                 <h5>Öffnungszeiten:</h5>
                 <p>Dienstag bis Samstag 18:00 - 24:00<br>Sonntag Montag Ruhetag</p>

            </div>
        </div>
</section>

The content is actually aligned in the center for that span, but the width of the page isn't right. The page width only goes across about 2/3 of the screen. Check out your divs are nested to see which one is too small — jonmrich, Mar 02 '16 at 13:07

score 0 · Answer 1 · answered Mar 02 '16 at 13:06

Try this

div {
    width: 300px;
    height: 200px;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

<section class="section-content section-intro" id="section-intro">
           <div class="row">
             <div class="span12 reservation">
                 <h5>Reservation unter:</h5>
                 <p>reservation@restaurant-nigrum.com<br>Tel.: +49 7221 / 3979006</p>
                <!-- <p>Restaurant Nigrum<br>Baldreitstrasse 1<br>76530 Baden Baden<br>Tel.: +49 7221 / 3979006<br>Fax: +49 7221 / 3979007</p>-->
                 <h5>Öffnungszeiten:</h5>
                 <p>Dienstag bis Samstag 18:00 - 24:00<br>Sonntag Montag Ruhetag</p>

            </div>
        </div>
</section>

score 0 · Answer 2 · answered Mar 02 '16 at 13:07

0

You can use css3 flexbox or bootstrap grid to center the content

<div align = "center">

answered Mar 02 '16 at 13:07

MMG

390
1
6
20

score 0 · Answer 3 · edited May 23 '17 at 11:47

Here are solutions for centering div StackOverflow Answer

This is my preferred solution.

HTML:

<div class="container"><div class="container__inner"></div></div>

CSS:

.container{
  position:relative;
}
.container__inner{
  width: 250px;
  height: 250px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Note that this solution only works if the container has a fixed height!

score 0 · Answer 4 · edited May 19 '17 at 04:05

You can set an outer div display to be table; and inner div as table-cell:

#div1{ 
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    position:fixed;
    width:595px;
    height:842px;
    background-color:green;
    display:table; 
}
#div2{
    display:table-cell;
    vertical-align: middle;
    margin:auto; 
    background-color:red;
    position:relative;
}
#div3{
    text-align:center; 
    background-color:blue; 
    width:50%; 
    margin:auto
}

The fiddle is here:

https://jsfiddle.net/GlynneT/06uzt7xx/3/

Align content in the middle of the page

4 Answers4