td 안에 div를 가운데 정렬 하려면 어떻게 해야 할까요?

혹은

그런데 equeer 레이아웃 사용중이신것 같은데... 레이아웃은 반응형 레이아웃이나 컨텐츠는 반응형이 아니네요

지금 만들고 계신 페이지는 PC는 대응이 가능하나... 모바일 환경에서는 전부 깨지고 있습니다. ㅠㅠ

저 또한 프랜차이즈 법인을 운영중인데.. 가맹관련 랜딩페이지의 접속자 USER AGENT를 살펴보면 모바일의 방문비중이 꽤나 높습니다.

이퀴어 레이아웃에서 제공하는 예제들을 참조, 수정하셔서 적용하시면 PC버전/모바일버전 따로 만드실 필요없이

반응형으로 PC+모바일 모두 지원하는 멋진 사이트를 만드실 수 있을겁니다!

참조 : https://calvinsnax.com/colors

  <style>
    td{width:300px;height:300px;border:1px solid #ddd;}
  </style>

  <table>
  <tr>
    <td style="text-align:center"><div style="border-radius:50%;width:200px;height:200px;display:inline-block;background:red"></div></td>
    <td><div style="border-radius:50%;width:200px;height:200px;background:red"></div></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </table>

이걸로 한번 확인해 보세요.

inline-block의 유무에 따라 라운드 위치가 달라질겁니다.

실수로 하단 td도 align:center를 넣어둔다는걸 깜박했네요.

이렇게 보시면 더 이해가 쉬우실겁니다.

  <style>
    td{width:300px;height:300px;border:1px solid #ddd;}
  </style>

  <table>
  <tr>
    <td style="text-align:center"><div style="border-radius:50%;width:200px;height:200px;display:inline-block;background:red">테스트</div></td>
    <td style="text-align:center"><div style="border-radius:50%;width:200px;height:200px;background:red">테스트</div></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  </table>

https://www.w3schools.com/css/tryit.asp?filename=trycss_table_vertical-align   여기에서 vertical-align: middle; 이걸로 바꾸신 다음에 한번 테스트 해 보세요.