<!DOCTYPE html> <html> <head> <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px; } </style> </head> <body> <h2>Center Align Elements</h2> <p>To horizontally center a block element (like div), use margin: auto;</p> <div class="center"> <p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p> </div> </body> </html>
https://www.w3schools.com/css/css_align.asp
<!DOCTYPE html> <html> <head> <style> .box { display: flex; flex-wrap: wrap; /* Optional. only if you want the items to wrap */ justify-content: center; /* For horizontal alignment */ align-items: center; /* For vertical alignment */ } * { margin: 0; padding: 0; } html, body { height: 100%; } .box { height: 200px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border: 2px solid tomato; } .box div { margin: 0 10px; width: 100px; } .item1 { height: 150px; background: pink; } </style> </head> <body> <div class="box"> <div class="item1">A</div> <div class="item1">B</div> <div class="item1">C</div> </div> </body> </html>
https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div
http://www.tipue.com/blog/center-a-div/
https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div