<!-- HTML -->
<!DOCTYPE html>
<html>
<body>
<div id="outer">
<div id="inner">Horizontally center this element inside another element</div>
</div>
</body>
</html>
/* CSS */
#inner {
display: table;
margin: 0 auto;
border: 1px solid red;
}
#outer {
border: 1px solid green;
width: 100%;
}