It is possible to center the middle item regardless of the widths of siblings by using Flexbox. You need to use nested flex containers and auto margins. Below, you can see how it can be done.
- Code Html
<!DOCTYPE html> <html> <head> <title>How to Make the Middle Item Stay Centered</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="blog"> <div class="box"> <span>Box 1</span> </div> <div class="box"> <span>Box 2</span> </div> <div class="box"> <span>Box 3</span> </div> </div> </body> </html> - Code Css
.blog { display: flex; } .box { flex: 1; display: flex; justify-content: center; } .box:first-child > span { margin-right: auto; } .box:last-child > span { margin-left: auto; } .box { align-items: center; border: 2px solid #000000; background-color: #f24976; padding:10px 30px; } p { text-align: center; margin: 5px 0 0 0; }
