CSS div align to bottom center - html

Question

I'm trying to align my <div class="social-icons"> into bottom center of my sidebar.
Well icon is on bottom of the page, but on the left.
Screenshot of page: Page screenshot
My code:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/*---------------------------------------------------------
1. Reset
-------------------------------------------------------- */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
.blue {
color: #06C;
}
.green {
color: #090;
}
main {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
a:focus {
outline: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
audio:not([controls]) {
display: none;
}
sub,
sup {
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -.5em;
}
sub {
bottom: -.25em;
}
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
vertical-align: baseline;
*vertical-align: middle;
}
button,
input {
line-height: normal;
*overflow: visible;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
input[type="search"] {
-webkit-appearance: textfield;
}
input[type="search"]:-webkit-search-decoration {
-webkit-appearance: none;
}
textarea {
overflow: auto;
vertical-align: top;
}
/*---------------------------------------------------------
2. Basic Style
-------------------------------------------------------- */
body {
font-size: 14px;
line-height: 24px;
color: #777777;
font-family: 'Verdana';
overflow-x: hidden;
}
a {
color: #006699;
-webkit-transition: all 150ms ease-in-out;
-moz-transition: all 150ms ease-in-out;
-ms-transition: all 150ms ease-in-out;
-o-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
text-decoration: none !important;
}
a:hover {
color: #555555;
}
h1,
h2,
h3,
h4,
h5 {
color: #555555;
font-weight: bold;
}
::-webkit-input-placeholder {
color: #999999;
}
:-moz-placeholder {
/* Firefox 18- */
color: #999999;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #999999;
}
:-ms-input-placeholder {
color: #999999;
}
.main-content,
.banner-bg {
float: right;
width: 87%;
}
#media screen and (max-width: 1290px) {
.main-content,
.banner-bg {
width: 70%;
}
}
#media screen and (max-width: 992px) {
.main-content,
.banner-bg {
width: 100%;
}
}
.content-wrapper {
padding: 0 80px;
}
#media screen and (max-width: 992px) {
.content-wrapper {
padding: 0 30px;
}
}
h4.widget-title {
font-size: 16px;
font-family: 'Verdana';
text-transform: uppercase;
margin-bottom: 40px;
}
hr {
position: relative;
outline: 0;
border: 0;
width: 100%;
height: 4px;
background: #dddddd;
margin-top: 40px;
margin-bottom: 0;
}
.page-section {
padding-top: 80px;
}
/*---------------------------------------------------------
3. Header
-------------------------------------------------------- */
.sidebar-menu {
float: left;
width: 13%;
height: 100%;
position: fixed;
background-color: #384553;
color: white;
overflow-y: hidden;
}
#media screen and (max-width: 1290px) {
.sidebar-menu {
overflow-y: scroll;
width: 30%;
}
}
.top-section {
padding: 40px;
}
.profile-image {
width: 150px;
height: 150px;
border: 4px solid white;
border-color: #505050;
-webkit-border-radius: 75px;
border-radius: 75px;
overflow: hidden;
margin-bottom: 20px;
margin: auto;
}
.profile-image img {
width: 100%;
}
h3.profile-title {
margin-bottom: 5px;
color: white;
font-size: 18px;
font-family: 'Verdana';
margin-top: 20px;
}
.main-navigation {
margin: 30px 0;
}
.main-navigation li {
display: block;
}
.main-navigation li a {
padding: 15px 40px;
display: block;
color: white;
font-size: 14px;
}
.main-navigation li a i {
margin-right: 15px;
font-size: 24px;
}
.main-navigation li a:hover {
background: #5b6878;
}
.main-navigation li a.active {
background: #495461;
}
.main-navigation li a.active:hover {
background: #495461;
}
.social-icons {
padding: 30px 40px;
position: fixed;
bottom: 0;
margin: auto;
text-align: center;
}
/* .social-icons li {
display: inline-block;
margin-right: 20px;
} */
.social-icons a {
font-size: 18px;
color: white;
}
.social-icons a:hover {
color: #282e35;
}
.responsive-header {
background: #5f6d7e;
text-align: center;
}
#media screen and (max-width: 992px) {
.responsive-header .main-navigation {
margin-top: 10px;
display: none;
}
}
#media screen and (max-width: 992px) {
.responsive-header p {
color: white;
}
}
#media screen and (max-width: 992px) {
.responsive-header .profile-image {
float: left;
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
border-radius: 50px;
overflow: hidden;
margin-right: 30px;
}
.responsive-header .profile-content {
text-align: left;
margin-top: 30px;
overflow: hidden;
}
}
#media screen and (max-width: 992px) {
.top-section {
padding-bottom: 0;
}
}
#media screen and (max-width: 992px) {
.main-navigation a {
padding: 10px;
}
.main-navigation a.active {
background: #5f6d7e !important;
}
.main-navigation a:hover {
background: #5f6d7e !important;
}
}
.toggle-menu {
width: 100%;
display: block;
padding: 20px;
margin-top: 30px;
background: #6cc0f7;
color: white;
font-size: 18px;
}
.toggle-menu:hover {
color: white;
}
/*---------------------------------------------------------
4. Main Content
-------------------------------------------------------- */
/*------ banner ------ */
.banner-bg {
padding: 180px 80px;
position: relative;
background: url("../img/7.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
z-index: 2;
}
.banner-overlay {
position: absolute;
width: 100%;
height: 100%;
background: rgba(95, 109, 126, 0.4);
top: 0;
left: 0;
z-index: 3;
}
.welcome-text {
position: relative;
z-index: 4;
}
.welcome-text h2 {
font-size: 42px;
font-family: 'Verdana';
color: white;
margin-bottom: 30px;
}
.welcome-text h5 {
font-size: 22px;
color: white;
}
/*------ about us ------ */
.about-image {
overflow: hidden;
border: 4px solid #dddddd;
margin-bottom: 40px;
}
.about-image img {
width: 100%;
display: block;
}
/*------ projects ------ */
.projects-holder {
margin-right: 0;
margin-left: 0;
margin-top: 40px;
}
.projects-holder .col-md-4,
.projects-holder .col-md-4 {
padding-right: 1px;
padding-left: 1px;
}
.project-item {
width: 100%;
margin-bottom: 2px;
overflow: hidden;
position: relative;
}
.project-item img {
width: 100%;
display: block;
}
.project-item:hover .project-hover {
top: 0;
opacity: 1;
visibility: visible;
}
.project-hover {
position: absolute;
width: 100%;
height: 100%;
top: 40px;
left: 0;
background: rgba(0, 0, 0, 0.9);
opacity: 0;
visibility: 0;
-webkit-transition: all 200ms linear;
-moz-transition: all 200ms linear;
-ms-transition: all 200ms linear;
-o-transition: all 200ms linear;
transition: all 200ms linear;
}
.project-hover .inside {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
padding: 30px;
}
.project-hover h5 {
font-size: 16px;
margin-bottom: 15px;
}
.project-hover h5 a {
color: white;
}
.project-hover p {
color: white;
font-size: 13px;
line-height: 20px;
}
/*------ contact ------ */
.contact-form {
margin-top: 40px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
outline: 0;
border: 1px solid #aaaaaa;
padding: 12px;
color: #999999;
margin-bottom: 30px;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: 0;
}
.contact-form .button {
width: auto;
background: #5f6d7e;
color: white;
text-transform: uppercase;
border: 0;
}
/*---------------------------------------------------------
5. Footer
-------------------------------------------------------- */
#footer p.copyright-text {
margin: 40px 0;
font-size: 13px;
}
#footer p.copyright-text a {
color: #5f6d7e;
}
#footer p.copyright-text a:hover {
color: #6cc0f7;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Autoservis Jiří Baloun</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!-- SIDEBAR -->
<div class="sidebar-menu hidden-xs hidden-sm">
<div class="top-section">
<div class="profile-image">
<img src="img/profile.jpg">
</div>
<h3 class="profile-title" align="center">Autoservis Jiří Baloun</h3>
<!-- <p class="profile-description">Digital Photography</p> -->
</div>
<!-- top-section -->
<div class="main-navigation">
<ul class="navigation">
<li><i class="fa fa-globe"></i>O nás</li>
<li><i class="fa fa-pencil"></i>Služby</li>
<li><i class="fa fa-camera-retro"></i>Galerie</li>
<li><i class="fa fa-link"></i>Kontakt</li>
</ul>
</div>
<!-- .main-navigation -->
<div class="social-icons">
<i class="fa fa-facebook-square" style="font-size:36px"></i>
</div>
<!-- .social-icons -->
</div>
<!-- .sidebar-menu -->
<div class="banner-bg" id="top">
<div class="banner-overlay"></div>
<div class="welcome-text">
<h2>Autoservis Jiří Baloun</h2>
<h5>Servis osobních vozidel</h5>
</div>
</div>
<!-- MAIN CONTENT -->
<div class="main-content">
<div class="fluid-container">
<div class="content-wrapper">
<!-- ABOUT -->
<div class="page-section" id="about">
<div class="row">
<div class="col-md-12">
<h4 class="widget-title">O nás</h4>
<!-- <div class="about-image">
<img src="img/8.jpg" alt="about me">
</div> -->
<p></p>
<hr>
</div>
</div>
<!-- #about -->
</div>
<!-- PROJECTS -->
<div class="page-section" id="projects">
<div class="row">
<div class="col-md-12">
<h4 class="widget-title">Náhled naší práce</h4>
<p>Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Maecenas et lorem molestie, maximus justo dignissim, cursus nisl. Nullam at ante quis ex pharetra
pulvinar quis id dolor. Integer lorem odio, euismod ut sem sit amet, imperdiet condimentum diam.</p>
</div>
</div>
<div class="row projects-holder">
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/1.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/2.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/3.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam cursus.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/4.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/5.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="project-item">
<img src="img/6.jpg" alt="">
<div class="project-hover">
<div class="inside">
<h5>Pellentesque porta ligula</h5>
<p>Quisque mattis sit amet dolor eu scelerisque. Vivamus bibendum massa et nisl tempus commodo.</p>
</div>
</div>
</div>
</div>
</div>
<!-- .projects-holder -->
</div>
<hr>
<!-- CONTACT -->
<div class="page-section" id="contact">
<div class="row">
<div class="col-md-12">
<h4 class="widget-title">KONTAKTUJTE NÁS</h4>
<p>Máte-li jakékoliv dotazy ohledně nabízených služeb, cen a podobně, neváhejte nás kontaktovat telefonicky nebo prostřednictvím tohoto formuláře.</p>
</div>
</div>
<div class="row">
<form action="#" method="post" class="contact-form">
<fieldset class="col-md-4 col-sm-6">
<input type="text" id="your-name" placeholder="Vaše jméno">
</fieldset>
<fieldset class="col-md-4 col-sm-6">
<input type="email" id="email" placeholder="Váš email">
</fieldset>
<fieldset class="col-md-4 col-sm-12">
<input type="text" id="your-subject" placeholder="Předmět zprávy">
</fieldset>
<fieldset class="col-md-12 col-sm-12">
<textarea name="message" id="message" cols="30" rows="6" placeholder="Napište nám"></textarea>
</fieldset>
<fieldset class="col-md-12 col-sm-12">
<input type="submit" class="button big default" value="Odeslat">
</fieldset>
</form>
</div>
<!-- .contact-form -->
</div>
<hr>
<div class="row" id="footer">
<div class="col-md-12 text-center">
<p class="copyright-text">Copyright © 2021 Autoservis Jiří Baloun</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script src="js/min/plugins.min.js"></script>
<script src="js/min/main.min.js"></script>
</body>
</html>

Answer 1

Use this:
.social-icons {
padding: 30px 40px;
position: absolute;
bottom: 0;
margin: auto;
text-align: center;
width: 100%;
left: 0;
right: 0;
}

Answer 2

If you give width to your social-icons you can align your items to center.
like below;
.social-icons {
padding: 30px 40px;
position: fixed;
bottom: 0;
margin: auto;
text-align: center;
width: 100%;
}