How to center image

Question

I have a menu and I’m trying to put the image to the center and leave 3 links to the left and 3 links to the right, I used:

display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); 

But it is only aligned in the mobile version, see below:

/*Main Menu CSS*/
*{
	margin: 0;
	padding: 0;
}
.header-area{
	background:#4DC3CF;
}
.header-area .logotipo {
display: inline-block;
line-height: 55px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.main-menu ul{
	text-align: center;
}
.main-menu ul li{
	list-style:none;
	display:inline-block;
	position:relative;
}
.main-menu ul li a{
	text-decoration: none;
	display: inline-block;
	font-size:18px;
	padding:30px 20px;
	margin:0px;
	color:#fff;
	font-weight: 600;
	text-transform: uppercase;
	transition: .4s;
}
.main-menu ul li a:hover{
	color:#000;
}

/*Dropdown Menu CSS*/
.main-menu ul li ul{
	position: absolute;
	left:0;
	top:100%;
	width:200px;
	z-index: 999;
	transform: scaleY(0);
	transform-origin: top center;
	opacity:0;
	visibility: hidden;
	transition: .4s;
	background:#4DC3CF;
	box-shadow: 0 2px 8px -2px rgb(37, 39, 38);
}
.main-menu ul li:hover ul{
	transform: scaleY(1);
	opacity:1;
	visibility: visible;
}
.main-menu ul li ul li a{
	padding:14px 18px;
}

   <header class="header-area">
			<a href="#" class="logotipo"><img src="https://i.imgur.com/eH60XtT.png" alt="logo alt"></a>
        <div class="main-menu">
            <nav>
                <ul>
                    <li><a href="#" title="">Home</a></li>
                    <li><a href="#" title="">About Us</a></li>
                    <li><a href="#" title="">Services</a>
                        <ul>
                            <li><a href="#">Service One</a></li>
                            <li><a href="#">Service Two</a></li>
                            <li><a href="#">Service Three</a></li>
                            <li><a href="#">Service Four</a></li>
                            <li><a href="#">Service Five</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="">Portfolio</a></li>
                    <li><a href="#" title="">Blog</a></li>
                    <li><a href="#" title="">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </header>

I saw post here and as far as I understood it was to be aligned because of the top: 50% and left and Translate and the display-inline-block would make it stay inside, but it didn’t work.

Answer 1

Or separating selectors in Transform

.elemento {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Answer 2

Using the property display with the value flex, you will have more features to align the elements on the screen. Use flex-direction: row;, justify-content: center; and align-items: center; to keep all elements centralized and a @media to make the layout responsive according to your guide.

Here is an example of the use of the value flex:

/*Main Menu CSS*/
* {
  margin: 0;
  padding: 0;
}
.header-area {
  background: #4dc3cf;
}
.header-area .logotipo {
  display: inline-block;
}
.main-menu ul {
  text-align: center;
}
.main-menu ul li {
  list-style: none;
  display: inline-block;
  position: relative;
}
.main-menu ul li a {
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  padding: 30px 20px;
  margin: 0px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  transition: 0.4s;
}
.main-menu ul li a:hover {
  color: #000;
}

/*Dropdown Menu CSS*/
.main-menu ul li ul {
  position: absolute;
  left: 0;
  top: 100%;
  width: 200px;
  z-index: 999;
  transform: scaleY(0);
  transform-origin: top center;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s;
  background: #4dc3cf;
  box-shadow: 0 2px 8px -2px rgb(37, 39, 38);
}
.main-menu ul li:hover ul {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
}
.main-menu ul li ul li a {
  padding: 14px 18px;
}

.main-menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
align-items: center;
}

@media (max-width: 650px) {
  .main-menu {
flex-direction: column;
  }
}

  <header class="header-area">

<div class="main-menu">
  <nav>
    <ul>
      <li><a href="#" title="">Home</a></li>
      <li><a href="#" title="">About Us</a></li>
      <li><a href="#" title="">Services</a>
        <ul>
          <li><a href="#">Service One</a></li>
          <li><a href="#">Service Two</a></li>
          <li><a href="#">Service Three</a></li>
          <li><a href="#">Service Four</a></li>
          <li><a href="#">Service Five</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <div class="logotipo">
    <a href="#"><img src="https://i.imgur.com/eH60XtT.png" alt="logo alt"></a>
  </div>
  <nav>
    <ul>
      <li><a href="#" title="">Portfolio</a></li>
      <li><a href="#" title="">Blog</a></li>
      <li><a href="#" title="">Contact Us</a></li>
    </ul>
  </nav>
</div>
  </header>