html字体在中心,CSS3 文字居于正中心的响应式圆圈背景

CSS

语言：

CSSSCSS

确定

/**

* Demo Styles

*/

html {

box-sizing: border-box;

}

*,

*:before,

*:after {

box-sizing: inherit;

}

html {

min-height: 100%;

}

body {

margin: 64px auto;

max-width: 640px;

width: 94%;

text-align: center;

}

/**

* Circle Styles

*/

.circle {

position: relative;

display: block;

margin: 2em 0;

background-color: transparent;

color: #222;

text-align: center;

}

.circle:after {

display: block;

padding-bottom: 100%;

width: 100%;

height: 0;

border-radius: 50%;

background-color: #ddd;

content: "";

}

.circle__inner {

position: absolute;

top: 0;

bottom: 0;

left: 0;

width: 100%;

height: 100%;

}

.circle__wrapper {

display: table;

width: 100%;

height: 100%;

}

.circle__content {

display: table-cell;

padding: 1em;

vertical-align: middle;

}

@media (min-width: 480px) {

.circle__content {

font-size: 2em;

}

}

@media (min-width: 768px) {

.circle__content {

font-size: 4em;

}

}