How can I get my footer-elements in middle of the footer?

Question

I have tried to get these 3 elements of my footer into the middle of the page but i don't know how it works if i add another 4th element that i don't have to edit again all the padding.

This is my HTML and CSS code:

footer {
	width: 100%;
	background-color: #333;
	display: table;
}

/* Finanzdienstleistungen */

.finanzdienstleistungenfooter {
	display: table-cell;
	list-style: none;
	padding-left: 50px;
}

.finanzdienstleistungenfooter li h1 {
	text-decoration: none;
	color: black;
	font-size: 16px;
	padding-bottom: 5px;
}

.finanzdienstleistungenfooter li a {
	text-decoration: none;
	color: black;
	color: rgba(106,106,106,1.00);
	font-size: 14px;
}

/* Vermietung */

.vermietungfooter {
	display: table-cell;
	list-style: none;
	padding-left: 50px;
}

.vermietungfooter li h1 {
	text-decoration: none;
	color: black;
	font-size: 16px;
	padding-bottom: 5px;
}

.vermietungfooter li a {
	text-decoration: none;
	color: rgba(106,106,106,1.00);
	font-size: 14px;
}

/* Über uns */

.ueberunsfooter {
	display: table-cell;
	list-style: none;
	padding-left: 50px;
}

.ueberunsfooter li h1 {
	text-decoration: none;
	color: black;
	font-size: 16px;
	padding-bottom: 5px;
}

.ueberunsfooter li a {
	text-decoration: none;
	color: rgba(106,106,106,1.00);
	font-size: 14px;
}

    <footer>
        <ul>
            <li>
                <ul class="finanzdienstleistungenfooter">
                    <li><a href="finanzdienstleistungen.php"><h1>Finanzdienstleistungen</h1></a></li>
                    <li><a href="#">Versicherungen</a></li>
                    <li><a href="#">Schadensabwickelung</a></li>    
                </ul>
                <ul class="vermietungfooter">
                    <li><a href="vermietung.php"><h1>Vermietung</h1></a></li>
                    <li><a href="#">Freie Wohnungen</a></li>
                    <li><a href="#">Alle Wohnungen</a></li>
                </ul>
                <ul class="ueberunsfooter">
                    <li><a href="#"><h1>Über uns</h1></a></li>
                    <li><a href="impressum.php">Impressum</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </li>
        </ul>
    </footer>

Answer 1

Try to use this. You can add 3 or 4 section as per your requirement. Your content will always be center aligned. I hope it will help you.

footer {
    width: 100%;
    background-color: #333;
    padding: 20px 0;
}

footer > ul {
    padding-left: 0;
}

footer > ul > li {
    display: table;
    list-style-type: none;
    table-layout: fixed;
    text-align: center;
    width: 100%;
}

footer li {
    list-style-type: none;
}

.finanzdienstleistungenfooter,
.vermietungfooter,
.ueberunsfooter {
	display: table-cell;
	list-style: none;
    padding-left: 0;
}

.finanzdienstleistungenfooter li h1,
.vermietungfooter li h1,
.ueberunsfooter li h1 {
	text-decoration: none;
	color: black;
	font-size: 16px;
	padding-bottom: 5px;
}

.finanzdienstleistungenfooter li a,
.vermietungfooter li a,
.ueberunsfooter li a {
	text-decoration: none;
	color: black;
	color: rgba(106,106,106,1.00);
	font-size: 14px;
}

<footer>
    <ul>
        <li>
            <ul class="finanzdienstleistungenfooter">
                <li><a href="finanzdienstleistungen.php"><h1>Finanzdienstleistungen</h1></a></li>
                <li><a href="#">Versicherungen</a></li>
                <li><a href="#">Schadensabwickelung</a></li>    
            </ul>
            <ul class="vermietungfooter">
                <li><a href="vermietung.php"><h1>Vermietung</h1></a></li>
                <li><a href="#">Freie Wohnungen</a></li>
                <li><a href="#">Alle Wohnungen</a></li>
            </ul>
            <ul class="ueberunsfooter">
                <li><a href="#"><h1>Über uns</h1></a></li>
                <li><a href="impressum.php">Impressum</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
            <ul class="ueberunsfooter">
                <li><a href="#"><h1>Über uns</h1></a></li>
                <li><a href="impressum.php">Impressum</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </li>
    </ul>
</footer>

Answer 2

You are completely over complicating things. Instead of using display: table-cell use display: inline-block, remove top level ul and add text-align: center to footer.

footer {
  font-size: 16px;
  background-color: #333;
  text-align: center;
}

footer a {
  text-decoration: none;
  color: rgba(106, 106, 106, 1.00);
  font-size: 16px;
}

footer ul {
  text-align: left;
  list-style: none;
  display: inline-block;
  padding: 15px;
}

footer h1 {
  font-size: 16px;
  color: black;
  margin: 0;
}

<footer>
  <ul>
    <li>
      <a href="finanzdienstleistungen.php">
        <h1>Finanzdienstleistungen</h1>
      </a>
    </li>
    <li><a href="#">Versicherungen</a></li>
    <li><a href="#">Schadensabwickelung</a></li>
  </ul>
  <ul>
    <li>
      <a href="vermietung.php">
        <h1>Vermietung</h1>
      </a>
    </li>
    <li><a href="#">Freie Wohnungen</a></li>
    <li><a href="#">Alle Wohnungen</a></li>
  </ul>
  <ul>
    <li>
      <a href="#">
        <h1>Über uns</h1>
      </a>
    </li>
    <li><a href="impressum.php">Impressum</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</footer>

Answer 3

I added a margin and position to the surrounding ul element:

footer {
    width: 100%;
    background-color: #333;
    display: table;
}
.top-list {
    display:inherit !important;
    margin:0 auto !important;
}
/* Finanzdienstleistungen */

.finanzdienstleistungenfooter {
    display: table-cell;
    list-style: none;
    padding-left: 50px;
}

.finanzdienstleistungenfooter li h1 {
    text-decoration: none;
    color: black;
    font-size: 16px;
    padding-bottom: 5px;
}

.finanzdienstleistungenfooter li a {
    text-decoration: none;
    color: black;
    color: rgba(106,106,106,1.00);
    font-size: 14px;
}

/* Vermietung */

.vermietungfooter {
    display: table-cell;
    list-style: none;
    padding-left: 50px;
}

.vermietungfooter li h1 {
    text-decoration: none;
    color: black;
    font-size: 16px;
    padding-bottom: 5px;
}

.vermietungfooter li a {
    text-decoration: none;
    color: rgba(106,106,106,1.00);
    font-size: 14px;
}

/* Über uns */

.ueberunsfooter {
    display: table-cell;
    list-style: none;
    padding-left: 50px;
}

<footer>
        <ul class="top-list">
            <li>
                <ul class="finanzdienstleistungenfooter">
                    <li><a href="finanzdienstleistungen.php"><h1>Finanzdienstleistungen</h1></a></li>
                    <li><a href="#">Versicherungen</a></li>
                    <li><a href="#">Schadensabwickelung</a></li>    
                </ul>
                <ul class="vermietungfooter">
                    <li><a href="vermietung.php"><h1>Vermietung</h1></a></li>
                    <li><a href="#">Freie Wohnungen</a></li>
                    <li><a href="#">Alle Wohnungen</a></li>
                </ul>
                <ul class="ueberunsfooter">
                    <li><a href="#"><h1>Über uns</h1></a></li>
                    <li><a href="impressum.php">Impressum</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </li>
        </ul>
    </footer>

Answer 4

add a container after the footer, for ex.

then apply a simple css

.footer-container{
width:1200px;
margin:auto;
}