JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="type1">
  <ul>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum</li>
    <li>consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit</li>
    <li>Lorem ipsum dolor</li>
    <li>Lorem</li>
    <li>Lorem ipsum dolor sit amet, conse</li>
    <li>Lorem ipsum dolor sit amet</li>
  </ul>
</div>


<ul class="type2">
  <li>Lorem ipsum dolor sit</li>
  <li>Lorem ipsum</li>
  <li>consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem</li>
  <li>Lorem ipsum dolor sit amet, conse conse</li>
  <li>Lorem ipsum dolor sit amet</li>
</ul>

<ul class="type3">
  <li>Lorem ipsum dolor sit</li>
  <li>Lorem ipsum</li>
  <li>consectetur adipisicing elit.</li>
  <li>Lorem ipsum dolor sit</li>
  <li>Lorem ipsum dolor</li>
  <li>Lorem</li>
  <li>Lorem ipsum dolor sit amet, conse  sit amet, conse</li>
  <li>Lorem ipsum dolor sit amet</li>
</ul>

SCSS

.type1 {
  display: flex;
  justify-content: center;
  ul {
    border: 1px solid red;
  }
}

// 최신 브라우저 대상(Safari 14.1 이상)
.type2 {
  max-inline-size: max-content;
  margin-inline: auto;
  border: 1px solid red;
}

// 최신 브라우저 대상
.type3 {
  width: max-content;
  margin-inline-start: auto;
  margin-inline-end: auto;
  border: 1px solid red;
}