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

I have a wide spread of the viewport, and the horizontal center is an alliance through the use of margins, and this In the center of a red square, say, that 100px to 100px is just using CSS in that div. Background color: red will not work because it will expand the entire divas, which is larger than 100 pixels, I currently have the following solution:

  div {background-image: linear-gradient (Right, red, red); Background-size: 100px 100px; Repeat Background: No Repetition; Background-position: center; }  

This works, because there is no change in the gradient, but it looks like laughing using linear shield, which makes the solution less useful. . Can the purely red square of a shape be created without using the HTML editing of the page or without the size of the division with the CDS? Preferably, I would like to save the image of 1 red pixel from scaling (I can not easily change the color).

Thanks for reading!

You add : after pseudo selector to add a block with these dimensions You can use it if you keep it in full condition, then you can place it in the left , head and transform and .

 . {Status: relative; } .box: after {content: ''; Status: Completed; Left: 50%; Top: 50%; Conversions: Translation (-50%, -50%); Width: 100px; Height: 100 pixels;  

}

or