<div class="a">
        <p>hello</p>
    </div>

    <div class="a">
        <img width="100px" src="https://img.freepik.com/free-photo/closeup-shot-of-a-black-cat-in-a-room_181624-13579.jpg?t=st=1645563148~exp=1645563748~hmac=871a0d9ba65501c5132675b35786148c133a281eeccc8c5c1d16e014d85ac5e0" alt="">
    </div>

    <div class="b">
        hello <span>왼쪽 정렬</span>
    </div>

    <div class ="c">
        hello <span>오른쪽 정렬</span>
    </div>

    <div class="a">
        <span>가운데 정렬</span>
    </div>
.a {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  background-color: lime;
}

.b {
  width: 300px;
  margin-right: auto; /*오른쪽 여백의 가용공간을 마진으로 사용한다*/
  background-color: lime;
}
.c {
  width: 300px;
  margin-left: auto; /*왼쪽 여백의 가용공간을 마진으로 사용한다*/
  background-color: lime;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.