I cant relocate span element on the middle of button, from some point this is going on outside even when I try to used display flex , also transform in css it is not working.
I used transform and I expect to get this span element on the middle of button but its not really helping out. What did I miss ??
*, *::after, *::before { box-sizing: border-box; } body { background-color: #171717; padding: 20px; } .hamburger { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; margin: 10px; position: relative; box-sizing: border-box; display: inline-block; cursor: pointer; background-color: transparent; border: 0; margin: 0; width: 50px; border: 3px solid pink; } .hamburger_box { display: flex; align-items: center; justify-content: center; text-align: center; border: 3px solid red; width: 40px; height: 24px; display: inline-block; position: relative; background-color: aqua; } .hamburger__inner { display: flex; align-items: center; justify-content: center; text-align: center; top: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 3px; background-color: #FFFFFF; position: relative; } .hamburger__inner::after, .hamburger__inner::before { left: 0; content: ""; width: 100%; height: 3px; background-color: #FFFFFF; position: absolute; } .hamburger__inner::after { top: 10px; } .hamburger__inner::before { top: -10px; }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <button class="hamburger"> <span class="hamburger_box"> <span class="hamburger__inner"></span> </span> </button> </body> </html>
