According to the size of the div, I want to set the background-position-x and the background-size.
Using only CSS without JS or JQuery, I use min() which works:
.test {
transition: all 0.5s;
background-image: url(./my-asset.svg);
background-repeat: no-repeat;
background-position-x: min(-50px, -100%);
background-position-y: center;
background-size: min(50px, 100%) 100%;
}
This works properly but only on recent browsers, but I have a Firefox target to v.68 and it is not compatible.
What could be the alternative without using JS or JQuery and only CSS ?
I reproduce what I would like to have in output using min(). Hover the red part to make it work:
body,
html {
height: 100%;
width: 100%;
margin: 5px;
}
#main {
display: flex;
flex-direction: row;
background-color: cyan;
}
.use-px {
width: 300px;
height: 300px;
border: solid 3px black;
}
.use-percentage {
margin-left: 200px;
width: 100px;
height: 300px;
border: solid 3px black;
}
.left-over-image {
width: 25%;
height: 100%;
transition: all 1s;
background-color: red;
background-image: url(https://www.w3schools.com/images/w3schools_green.jpg);
background-repeat: no-repeat;
background-position-x: min(-50px, -100%);
background-position-y: center;
background-size: min(50px, 100%) 100%;
}
.left-over-image:hover {
background-position: left;
}
<html>
<body>
<div id="main">
<div class="use-px">
<!-- It will use 50px, because 25% of 300px is 75px. -->
<div class="left-over-image"></div>
</div>
<div class="use-percentage">
<!-- It will use 100%, because 25% of 100px is 25px. -->
<div class="left-over-image"></div>
</div>
</div>
</body>
</html>
You can consider a trick using pseudo element.
Resize both examples to see that they behave the same:
.box {
height:100px;
width:100px;
border:2px solid;
resize:both;
overflow:hidden;
background:linear-gradient(red,blue) 0/50px 50px no-repeat;
background-position-x: min(4em, 100%);
}
.alt {
height:100px;
width:100px;
border:2px solid;
resize:both;
overflow:hidden;
position:relative;
z-index:0;
}
.alt::before {
content:"";
position:absolute;
background:inherit;
background:linear-gradient(red,blue) 0/50px 50px no-repeat;
background-position-x:100%;
max-width:calc(4em + 50px); /* 4em + width of background */
width:100%;
top:0;
bottom:0;
left:0;
z-index:-1;
}
<div class="box">
</div>
<div class="alt">
</div>
UPDATE
Based on your new code:
body,
html {
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
}
#main {
display: flex;
flex-direction: row;
background-color: cyan;
}
.use-px {
width: 300px;
height: 300px;
border: solid 1px black;
}
.use-percentage {
width: 100px;
height: 300px;
border: solid 1px black;
}
.left-over-image {
width: 25%;
height: 100%;
background-color: red;
position:relative;
overflow:hidden;
}
.left-over-image::before {
content:"";
position:absolute;
top:0;
bottom:0;
left:0;
width:100%;
max-width:50px;
background-image: url(https://www.w3schools.com/images/w3schools_green.jpg);
background-size: 100% 100%;
transform:translateX(-100%);
transition: all 1s;
}
.left-over-image:hover::before {
transform:translateX(0);
}
<div id="main">
<div class="use-px">
<!-- It will use 50px, because 25% of 300px is 75px. -->
<div class="left-over-image"></div>
</div>
<div class="use-percentage">
<!-- It will use 100%, because 25% of 100px is 25px. -->
<div class="left-over-image"></div>
</div>
</div>
Related
Here, I have some divs of various sizes, and I'm applying a background image to them:
div {
border: solid 2px red;
background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
margin: 2em;
}
.a {
width: 100px;
height: 200px;
}
.b {
width: 200px;
height: 100px ;
}
.c {
width: 200px;
height: 200px;
}
<div class ="a"> </div>
<div class ="b"> </div>
<div class ="c"> </div>
Now, I only want to display the image on the left half of the div, but I want it to cover the full height. The background shouldn't warp, instead it should zoom/stretch.
One way to do this is to add position right on it:
div {
border: solid 2px red;
background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
margin: 2em;
background-position: top right 50px; //Actually in my situation I would just use vw;
}
.a {
width: 100px;
height: 200px;
}
.b {
width: 200px;
height: 100px ;
}
.c {
width: 200px;
height: 200px;
}
<div class ="a"> </div>
<div class ="b"> </div>
<div class ="c"> </div>
But the problem with this is that it only shows the right hand side of the image, whereas in my scenario I want it to either show from the left, or show from the center.
Is there a way to apply a clip to the background image? My alternative solution is to lay a div on top to hide it.
I would consider a pseudo element that will be your background layer:
.box {
border: solid 2px red;
background-image: url('https://www.360nobs.com/wp-content/uploads/2016/02/lady-gaga.jpg');
background-size: 0 0;
display: inline-block;
margin: 2em;
position: relative;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:50%;
bottom:0;
background-image:inherit;
background-size:cover;
}
.a {
width: 100px;
height: 200px;
}
.b {
width: 200px;
height: 100px;
}
.c {
width: 200px;
height: 200px;
}
<div class="a box"> </div>
<div class="b box"> </div>
<div class="c box"> </div>
you can try to add background-attachment:fixed; to your background. hope it works.
This is the closest I can get to. But instead of the text being black. I want it to have the UNBLURRED background clipped to it.
Attempt 1:
*{
padding:0;
margin:0;
}
/*Centering*/
html,body{
height:100%;
overflow:hidden;
}
.box{
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
/*Clip text*/
.item{
font-size:250px;
z-index:1;
}
.box{
background:url('https://media.timeout.com/images/103444978/image.jpg');
background-size:cover;
}
/*Blurring*/
.box::before{
content:'';
background:inherit;
filter:blur(10px);
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:-20px;
}
<div class='box'>
<div class='item'>NYC</div>
</div>
The problem seems to be the conflict between the z-index:1 set on .item class, and the -webkit-background-clip:text; property. You cannot have the 2 together, otherwise, the screen will be blank. The z-index:1 is used to put the text in front of the blurred bacground.
This is where I try to put the blurring and clipping effect together. I commented out the z-index:1 in .item class, so the page won't go blank.
Attemp 2:
*{
padding:0;
margin:0;
}
/*Centering*/
html,body{
height:100%;
overflow:hidden;
}
.box{
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
/*Clip text*/
.item{
font-size:250px;
/*z-index:1;*/
}
.box{
background:url('https://media.timeout.com/images/103444978/image.jpg');color:#21537a;/*text color for nonwebkit*/
-webkit-text-fill-color: transparent;
background-size:cover;
-webkit-background-clip:text;
}
/*Blurring*/
.box::before{
content:'';
background:inherit;
filter:blur(10px);
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:-20px;
}
<div class='box'>
<div class='item'>NYC</div>
</div>
Apply the same background, with the same parameters to .box and .box::before. Move .box::before to the background using z-index: -1.
Note: The text is unreadable with blur(10px), so I've changed it to filter: blur(15px).
.box,
.box::before {
background: url('https://media.timeout.com/images/103444978/image.jpg');
background-size: cover;
background-position: 0;
}
* { padding: 0; margin: 0; }
html, body { height: 100%; overflow: hidden; }
.item {
font-size: 250px;
}
.box,
.box::before {
background: url('https://media.timeout.com/images/103444978/image.jpg');
background-size: cover;
background-position: 0;
}
.box {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
color: #21537a; /*text color for nonwebkit*/
background-size: cover;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.box::before {
z-index: -1;
content: '';
filter: blur(15px);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="box">
<div class="item">NYC</div>
</div>
To blur just the text, remove the ::before pseudo-element, and move the background clip properties and the filter to the .item. You'll need to give the text a bit of color, and lower the filter radius, or the effect would be almost invisible.
* { padding: 0; margin: 0; }
html, body { height: 100%; overflow: hidden; }
.box,
.item {
background: url('https://media.timeout.com/images/103444978/image.jpg');
background-size: cover;
background-position: 0;
}
.item {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
font-size: 250px;
-webkit-text-fill-color: rgba(255, 255, 255, 0.2);
-webkit-background-clip: text;
filter: blur(2px);
}
.box {
height: 100%;
color: #21537a;
}
<div class='box'>
<div class='item'>NYC</div>
</div>
Just give both elements the background with height: 100% so that the background size will be the same for both, change .item to be the flex parent that center's it's content, apply the background-clip and text-fill-color to .item and give it a position so it will appear of the pseudo element of the parent.
*{
padding:0;
margin:0;
}
/*Centering*/
html,body, .item, .box{
height:100%;
overflow:hidden;
}
.item{
display:flex;
justify-content:center;
align-items:center;
}
/*Clip text*/
.box {
background:url('https://media.timeout.com/images/103444978/image.jpg');
color:#21537a;
background-size:cover;
}
/*Blurring*/
.box::before{
content:'';
background:inherit;
filter:blur(10px);
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:-20px;
}
.item{
font-size:250px;
position: relative;
background: inherit;
-webkit-text-fill-color: transparent;
-webkit-background-clip:text;
}
<div class='box'>
<div class='item'>NYC</div>
</div>
I am learning css as beginner and doing some basic tests. My question is: given the css below how can I position the box2 in exactly the middle of the box1?
.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
}
.box2 {
height:300px;
width:300px;
background: red;
margin: auto;
}
At the beginning I thought giving box2 a margin auto so the box2 would be in equal distance from top and bottom but I get this result.
It looks like it sets the margin auto for left and right but not for top and bottom.
So if I give a margin top myself it works like this.
Code:
.box2 {
margin: 20px auto;
}
How can I do so the box2 is completely centered in the box1?
.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
}
.box2 {
height:300px;
width:300px;
background: red;
position:relative;
left:12.5%;
top:12.5%;
}
<div class="box1">
<div class="box2">
</div>
</div>
try this.
.box1 {
background: black;
height: 400px;
width: 400px;
display:flex;
justify-content:center;
align-items: center;
}
.box2 {
height:300px;
width:300px;
background: red;
}
<div class="box1">
<div class="box2"></div>
</div>
You can do this using flexbox
.box1 {
background: black;
height: 400px;
width: 400px;
margin: auto;
display:flex;
align-items: center;
justify-content: center;
}
.box2 {
height:300px;
width:300px;
background: red;
margin: auto;
}
<div class="box1">
<div class="box2">
</div>
</div>
.box1 {
position:relative;
background: black;
height: 400px;
width: 400px;
margin: auto;
}
.box2 {
position:absolute;
height:300px;
width:300px;
background: red;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
Check the fiddle: https://jsfiddle.net/wh4yqk2y/
how do I achieve this in CSS.
Currently I have tried everything I know but failed. My basic structure was like this.
<div>
<div class='pink-div'></div>
<div class='blue-cirle-div'>
<div> Some Text </div>
</div>
<div class='yellow-div'></div>
</div>
Thanks.
Here you go.
The HTML:
<div class="main">
<div class='pink-div'> </div>
<div class='blue-cirle-div'>
<div class="forsomeText">Some Text</div>
</div>
<div class='yellow-div'> </div>
</div>
The CSS:
.main{position:relative;}
.pink-div {
background: none repeat scroll 0 0 #feaec9;
height: 110px;
}
.yellow-div {
background: none repeat scroll 0 0 #b5e51d;
height: 110px;
}
.blue-cirle-div {
background: none repeat scroll 0 0 #3f47cc;
border-radius: 110px;
display: block;
height: 140px;
left: 50%;
margin: 0 auto;
position: absolute;
text-align: center;
top: 18%;
vertical-align: middle;
}
.forsomeText {
display: block;
margin: 0 auto;
padding: 60px 37px 37px;
text-align: center;
vertical-align: middle;
}
The live fiddle link:
WORKING DEMO
I hope this helps.
According to your tastes and needs, you may choose one of the 4 following templates:
#1 Center circle using position, top, bottom, left, right and margin properties
.main {
/* prepare .main to center .blue-circle */
position: relative;
}
.pink-div {
background-color: pink;
height: 100px;
}
.yellow-div {
background-color: yellow;
height: 100px;
}
.blue-circle {
background-color: blue;
border-radius: 50%;
height: 140px;
width: 140px;
/* center .blue-circle inside .main */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* center .text-div inside .blue-circle using flexbox */
display: flex;
align-items: center;
justify-content: center;
}
<div class="main">
<div class="pink-div"></div>
<div class="blue-circle">
<div class="text-div">Some Text</div>
</div>
<div class="yellow-div"></div>
</div>
#2 Center circle using position, top, left, margin-top and margin-left properties
.main {
height: 200px;
/* prepare .main to center .blue-circle */
position: relative;
}
.pink-div {
background-color: pink;
height: 50%;
}
.yellow-div {
background-color: yellow;
height: 50%;
}
.blue-circle {
background-color: blue;
border-radius: 50%;
height: 140px;
width: 140px;
/* center .blue-circle inside .main */
position: absolute;
top: 50%;
left: 50%;
margin-top: -70px;
margin-left: -70px;
/* center .text-div inside .blue-circle using display: table */
display: table;
}
.text-div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="main">
<div class="pink-div"></div>
<div class="blue-circle">
<div class="text-div">Some Text</div>
</div>
<div class="yellow-div"></div>
</div>
#3 Center circle using position, top, left and transform properties
.main {
height: 200px;
/* prepare .main to center .blue-circle */
position: relative;
}
.pink-div {
background-color: pink;
height: 50%;
}
.yellow-div {
background-color: yellow;
height: 50%;
}
.blue-circle {
background-color: blue;
border-radius: 50%;
height: 140px;
width: 140px;
/* center .blue-circle inside .main */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* center .text-div inside .blue-circle using display: table */
display: table;
}
.text-div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="main">
<div class="pink-div"></div>
<div class="blue-circle">
<div class="text-div">Some Text</div>
</div>
<div class="yellow-div"></div>
</div>
#4 Center circle using Flexbox
Note that the following HTML snippet is different from the previous ones.
.main {
height: 200px;
background: linear-gradient(180deg, pink 50%, yellow 50%);
/* prepare .main to center .blue-circle */
display: flex;
align-items: center;
justify-content: center;
}
.blue-circle {
background-color: blue;
border-radius: 50%;
height: 140px;
width: 140px;
/* prepare .blue-circle to center .text-div */
position: relative;
}
.text-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="main">
<div class="blue-circle">
<div class="text-div">Some Text</div>
</div>
</div>
It depends on the rest of your page & layout, but basically you need a square element with border-radius:50%;
A rough example
.pink-div, .yellow-div {
width:100%;
height:100px;
background-color:#FEAEC9;
}
.yellow-div {
background-color:#B5E51D;
}
.blue-cirle-div {
text-align:center;
position:absolute;
left:150px;
top:60px;
line-height:100px;
height:100px;
width:100px;
border-radius:50%;
background-color:#3F47CC;
}
http://jsfiddle.net/9dhdd9ue/
Use one div with CSS gradient instead of two divs.
Also, I used display:table and display:table-cell for vertical align.
.parent{
height: 500px; /* some height */
background: #ff32e3; /* Old browsers */
background: -moz-linear-gradient(top, #ff32e3 0%, #ff32e3 50%, #ff32e3 50%, #ff32e3 50%, #9ddd77 50%, #9ddd77 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff32e3), color-stop(50%,#ff32e3), color-stop(50%,#ff32e3), color-stop(50%,#ff32e3), color-stop(50%,#9ddd77), color-stop(100%,#9ddd77)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff32e3 0%,#ff32e3 50%,#ff32e3 50%,#ff32e3 50%,#9ddd77 50%,#9ddd77 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff32e3', endColorstr='#9ddd77',GradientType=0 ); /* IE6-9 */
display:table;
width:100%;
}
.parent>div{
display:table-cell;
vertical-align:middle;
text-align:center;
width:100%;
}
.parent>div>span{
background:aqua;
border-radius: 50%;
padding: 50px;
}
<div class="parent">
<div>
<span>circle</span>
</div>
</div>
JSFiddle
Use Ultimate CSS Gradient Generator for gradients.
Here is the complete solution
HTML
<div class="wrapper">
<div class='pink-div'></div>
<div class='blue-cirle-div'>
</div>
<div class='yellow-div'></div>
</div>
CSS
.wrapper {
width:600px;
margin: 0 auto;
height:600px;
position:relative;
}
.pink-div {
width:600px;
height:300px;
background:pink;
float:left;
}
.yellow-div {
width:600px;
height:300px;
background:yellow;
float:left;
}
.blue-cirle-div {
width:300px;
height:300px;
border-radius:150px;
background:blue;
position:absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;
margin:auto;
}
Check the Demo
I am trying to make one circle inside of another circle using css, but I am having an issue making it completely centered. I am close, but still not there. Any ideas?
<div id="content">
<h1>Test Circle</h1>
<div id="outer-circle">
<div id="inner-circle">
<span id="inside-content"></span>
</div>
</div>
</div>
Here is my CSS:
#outer-circle {
background: #385a94;
border-radius: 50%;
height:500px;
width:500px;
}
#inner-circle {
position: relative;
background: #a9aaab;
border-radius: 50%;
height:300px;
width:300px;
margin: 0px 0px 0px 100px;
}
Also, here is a fiddle:
http://jsfiddle.net/972SF/
Ta da!
Explained in the CSS comments:
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 500px;
width: 500px;
position: relative;
/*
Child elements with absolute positioning will be
positioned relative to this div
*/
}
#inner-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height: 300px;
width: 300px;
/*
Put top edge and left edge in the center
*/
top: 50%;
left: 50%;
margin: -150px 0px 0px -150px;
/*
Offset the position correctly with
minus half of the width and minus half of the height
*/
}
<div id="outer-circle">
<div id="inner-circle">
</div>
</div>
You don't need extra elements in CSS3
You can do it all with one element and a box-shadow.
JSFiddle Demo.
CSS
#outer-circle {
background: #385a94;
border-radius: 50%;
height:300px;
width:300px;
position: relative;
box-shadow: 0 0 0 100px black;
margin:100px;
}
If you want to use only one div to add circle inside circle, then use box-shadow.
div {
border-radius: 50%;
box-shadow: 0px 0px 0px 10px red, 0px 0px 0px 20px green, 0px 0px 0px 30px yellow, 0px 0px 0px 40px pink;
width: 100px;
height:100px;
margin: 3em;
}
<div></div>
Solved this by using CSS transform property:
You can refer to this JS fiddle link for below output:
http://jsfiddle.net/suprabhasupi/74b1ptne/
div {
border-radius: 50%;
/* border: 1px solid red; */
}
.circle1 {
position: relative;
width: 300px;
height: 300px;
background-color: red;
}
.circle2 {
transform: translate(25%, 25%);
width: 200px;
height: 200px;
background-color: green;
}
.circle3 {
transform: translate(48%, 46%);
width: 100px;
height: 100px;
background-color: blue;
}
<div class="circle1">
<div class="circle2">
<div class="circle3">
</div>
</div>
</div>
Use position: relative on the outer circle, position:absolute on the inner circle, and set all offset to the same value. Let the automatic calculation of height and width handle the rest (JSFiddle):
#outer-circle {
position:relative;
background: #385a94;
border-radius: 50%;
height:500px;
width:500px;
}
#inner-circle {
position:absolute;
background: #a9aaab;
border-radius: 50%;
right: 100px;
left: 100px;
top: 100px;
bottom: 100px;
/* no margin, no width, they get automatically calculated*/
}
Seems that top is the only thing you need to alter -> http://jsfiddle.net/972SF/12/
#inner-circle {
position: relative;
background: #a9aaab;
border-radius: 50%;
height:300px;
width:300px;
top: 100px; /* <--- */
margin: 0px 0px 0px 100px;
}
Just use box-shadow to get the effect you want:
Demo in a fiddle: http://jsfiddle.net/972SF/16/
The html is reduced to:
<div id="content">
<h1>Test Circle</h1>
<div id="circle">
</div>
</div>
Css:
#circle {
margin: 10em auto;
background: #385a94;
border-radius: 50%;
height:200px;
width:200px;
-webkit-box-shadow: 1px 1px 0px 100px black;
-moz-box-shadow: 1px 1px 0px 100px black;
box-shadow: 1px 1px 0px 100px black;
}
its simple, easy, and makes sure that your circles are always perfectly positioned next to each other.
You can change the size of the circle by changing the 4th property ( 100px ) on box-shadow to what ever you want.
take a look at this fiddle
which calculates centering automatically
#outer-circle {
background: #385a94;
border-radius: 50%;
height:500px;
width:500px;
display:table-cell;
vertical-align:middle;
}
#inner-circle {
display:inline-block;
background: #a9aaab;
border-radius: 50%;
height:300px;
width:300px;
}
Here is an example of a circle with outer border.
HTML:
<div id="inner-circle"></div>
Styles:
#inner-circle {
background: #385a94;
border : 2px solid white;
border-radius: 50%;
height:30px;
width:30px;
position: relative;
box-shadow: 0 0 0 1px #cfd1d1;
}
See results:
JSFiddle
Try,
#inner-circle {
position: absolute;
background: #a9aaab;
border-radius: 50%;
height:300px;
width:300px;
margin: 15% 0px 0px 100px;
}
Here is ur Updated JSFIDDLE
See How I have positioned the Divs, Just border-radius should do the Job
.outer{width:500px;height:500px;background:#f00;border-radius:50%;position:relative;top:0;left:100;}
.inner{width:250px;height:250px;background:#000;border-radius:50%;position:absolute;top:125;left:125;}
<div class="outer">
<div class="inner">
</div>
</div>
DEMO
try to give the innercircle a top:50% and than margin-top: a nagative value from the half of the height of the innercircle.
http://jsfiddle.net/972SF/19/
SOLVED! Exactly the way you want:
DEMO: http://jsfiddle.net/aniruddha153/RLWua/
HTML:
<div id="content">
<div id="outer-circle">
<div id="inner-circle">
</div>
</div>
</div>
CSS:
#content {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#outer-circle {
position: absolute;
width: 50%;
height: 50%;
background-color: #000000;
border-radius: 50%;
}
#inner-circle{
margin-top: 25%;
margin-left: 25%;
position: absolute;
width: 50%;
height: 50%;
background-color: #e5e5e5;
border-radius: 50%;
}
You can use the top and left property of CSS to center it.
body {
width: 100%
margin:0px;
text-align: center;
}
#content {
width: 500px;
margin-left: auto;
margin-right: auto;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height:200px;
width:200px;
}
#inner-circle {
position: relative;
background: #a9aaab;
border-radius: 50%;
height:100px;
width:100px;
top:50px;
left:50px;
}
<div id="content">
<h1>Test Circle</h1>
<div id="outer-circle">
<div id="inner-circle">
<span id="inside-content"></span>
</div>
</div>
</div>