Centering an Element Horizontally

This CSS Reference page illustrates how center an element horizontally within a another element. To center the inner div element, we set the width to fit-content to make that it only as big as the conttent. Then we set the left and right margins to auto. If the width was already set, the margins are all that we would need.

CenteringHorizontally.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's CSS</title>
</head>
<body>
  <div style="width:400px;border:1px gray solid;background-color:white;">
    <div style="border:1px #F0F0F0 solid;width:fit-content;margin-left:auto;margin-right:auto;">
      <p><q>Here I am, Lord. Send me.</q></p>
      <p>--Isaiah 6:8</p>
    </div>
  </div>
</body>
</html>

Core CSS

Centering an Element Horizontally

CenteringHorizontally.html

Output