css - Some-size some-colour square in background of div without resizing div or editing html -

css - Some-size some-colour square in background of div without resizing div or editing html -

i have div spanning whole height of viewport, while beingness horizontally center-aligned through utilize of margins, , center reddish square of, say, 100px 100px in div using css. background-color: reddish wouldn't work, because span whole div, bigger 100 pixels. have next solution:

div { background-image: linear-gradient(to right, red, red); background-size: 100px 100px; background-repeat: no-repeat; background-position: center; }

it works, because there's no shift in gradient, using linear-gradient in way seems sort of hackish, makes solution less useable. there way generate purely reddish square of size smaller div without resorting editing html of page, or resizing div css? preferably, avoid scaling image of 1 reddish pixel (i wouldn't able alter colour).

thanks reading!

you utilize :after pseudo selector add together block these dimensions. if position absolute can center using left, top , transform.

.box { position: relative; } .box:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px;

}

or see http://codepen.io/ckuijjer/pen/cbdul

css