[CSS] 畫一個圓,並使圓中的字置中顯示
HTML
- <div class="circle">
- <h3>Hello</h3>
- </div>
CSS
- .circle {
- position:relative;
- width: 10vw;
- height: 10vw;
- border-radius:50%;
- background:gold;
- }
- .circle h3 {
- position:absolute;
- top:50%;
- left:50%;
- transform: translate(-50%, -50%);
- margin:0;
- }
Source
☞ Responsive circle with centered content☞ Absolute Centering in CSS
沒有留言: