[CSS] 畫一個圓,並使圓中的字置中顯示


HTML

  1. <div class="circle">
  2. <h3>Hello</h3>
  3. </div>

CSS

  1. .circle {
  2. position:relative;
  3. width: 10vw;
  4. height: 10vw;
  5. border-radius:50%;
  6. background:gold;
  7. }
  8. .circle h3 {
  9. position:absolute;
  10. top:50%;
  11. left:50%;
  12. transform: translate(-50%, -50%);
  13. margin:0;
  14. }

Source

Responsive circle with centered content
Absolute Centering in CSS

沒有留言:

技術提供:Blogger.