Centering at the button

how could I center my ( section ) at the button of the page in the center? I tried everything

<!DOCTYPE html>
<html>
<section>
<div>
  <ul> 
    <li>
      <a href="https://t.me/bild96">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fa fa-telegram"></span>
      </a> 
    </li>
    <li>
      <a href="https://twitter.com/BiLd96">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fa fa-twitter"></span>
      </a> 
    </li>
    <li>
      <a href="https://instagram.com/afronomad.eth">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fa fa-instagram"></span>
      </a> 
    </li>
    <li>
      <a href="https://github.com/Bild96">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fa fa-github"></span>
      </a> 
    </li>
    <li>
      <a href="mailto:BiLd96@pm.com?Subject=Hello%20again">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span class="fa fa-envelope"></span>
      </a> 
    </li>
  </ul>  

  </section>
</body>

<style>
/*socialMedia*/

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
* {
  padding: 0px;
  margin: 0px;
}


section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vw;
  background: ;
}

 ul {
   position: relative;
   display: flex;
   transform: rotate(-25deg) skew(25deg);
   transform-style: preserve-3d;
}
ul li {
  position: relative;
  list-style: none;
  width: 60px;
  height: 60px;
  margin: 0px 20px;
}
ul li:before{
  content: '';
  position: absolute;
  bottom: -10px;
  left: -5px;
  width: 100%;
  height: 10px;
  background: #2a2a2a;
  trnasform-origin: top;
  transform: skewX(-41deg);
}
ul li:after{
  content: '';
  position: absolute;
  top:5px;
  left: -9px;
  width: 9px;
  height: 100%;
  background: #2a2a2a;
  trnasform-origin: right;
  transform: skewY(-49deg);
}
ul li span{
  position: absolute;
  top: 0;
  lef: 0;
  width: 100%;
  height: 100%;
  display: flex !important;
  background: #2a2a2a;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 30px !important;
  transition: 1.5s ease-out;
}
ul li:hover span {
  z-index: 1000;
  transition: .3s;
  color: #fff;
  box-shadw: -1px 1px 1px rgba(0, 0, 0, .5);
}
ul li:hover span:nth-child(5){
  transform: translate(40px, -40px);
  opacity: 1;
}
ul li:hover span:nth-child(4){
  transform: translate(30px, -30px);
  opacity: .8;
}
ul li:hover span:nth-child(3){
  transform: translate(20px, -20px);
  opacity: .6;
}
ul li:hover span:nth-child(2){
  transform: translate(10px, -10px);
  opacity: .4;
}ul li:hover span:nth-child(1){
  transform: translate(0px, 0px);
  opacity: .2;

}
ul li:nth-child(1):hover span{
  background: #52E19F !important;
}
ul li:nth-child(2):hover span{
  background: #2C3456 !important;
}
ul li:nth-child(3):hover span{
  background: #EA6E96 !important;
}
ul li:nth-child(4):hover span{
  background: #FCEB00 !important;
}
ul li:nth-child(5):hover span{
  background: #d35400 !important;
}
/*end of socialMedia*/

body {
background-color: black;
}
</style>
</html>

Can you also include your HTML so it’s easier to see where the code isn’t working how you intend?

In style tag try changing the ul transform rotate to (none)

It’s in the middle of the page ( I need it at the bottom of the page ) !!

Hi @Bild96,

Try changing your align-items: center to align-items: flex-end.

I am not sure if this is what your end goal was but if not, you might find
it useful to look through the options on this page: flexBoxFroggy.

I hope this helps :slight_smile:

1 Like

I personally have used responsive columns split it thirds with a div tag and inside the div tag I also included an empty p tag in the 1st and 3rd column using bootstrap or w3css it works either way for me. The center column is of course for the content you wish to be centered. And of course use text-align for that div tag in the center column or if using w3css you can use w3-center as one of the classes in your div and p tags. I’m sure there are better ways of doing it, but I have yet to figure out. Hope that made sense!