CSS Centering div on other

Question

I am trying to find the best way to center one div over another which is using the 'top' and 'left' CSS components. When resizing the browser window the circle should always be in the center of the box, however moves slightly off horizontally when scaling

Here is the code I am using; https://codepen.io/EarlGrey8/pen/LYVOQrY

body {
    background-color: #908787;
}


.banner {
    position: fixed;
    width: 101%;
    margin: -1%;
    height: 35%;
    background-color: #76568e;
}

.moduleContainer {
    position: absolute;
    font-family: 'Bellota', cursive;
    background-color: #e2e2e2;
    top: 25%;
    left: 20%;
    border-style: solid;
    border-radius: 20px;
    border-color: #cacaca;
    width: 60%;
    height: 400px;
}

.moduleInner {
    display: inline-block;
    position: relative;
    top: -130px;
    width: 100%;
    height: 70%;

}

.moduleImage {
    position: relative;
    border-radius: 100%;
    background-color: #908787;
    height: 250px;
    width: 250px;
    top: -130px;
    left: 33%;
}

<body>
    <div class="banner"></div>

<div class="moduleContainer">
    <div class="moduleImage"></div>
    <div class="moduleInner"></div>

</div>

</body>

score 3 · Accepted Answer · answered Mar 07 '20 at 15:49

3

To center the circle on any screen. Try the following CSS.

.moduleImage {
    left: 50%;
    transform: translateX(-50%);
}

answered Mar 07 '20 at 15:49

Gamers Agenda

433
2
13

Oh dear. That is so simple, a little embarrassing xD Thank you for the swift answer! – Earl Grey Mar 07 '20 at 15:59

score 0 · Answer 2 · answered Mar 07 '20 at 15:51

Change .moduleImage's position, transform property.

body {
  background-color: #908787;
}

.banner {
  position: fixed;
  width: 101%;
  margin: -1%;
  height: 35%;
  background-color: #76568e;
}

.moduleContainer {
  position: absolute;
  font-family: 'Bellota', cursive;
  background-color: #e2e2e2;
  top: 25%;
  left: 20%;
  border-style: solid;
  border-radius: 20px;
  border-color: #cacaca;
  width: 60%;
  height: 400px;
}

.moduleInner {
  display: inline-block;
  position: relative;
  top: -130px;
  width: 100%;
  height: 70%;
}

.moduleImage {
  position: absolute; /* change */
  border-radius: 100%;
  background-color: #908787;
  height: 250px;
  width: 250px;
  top: -130px;
  left: 50%;
  transform: translateX(-50%); /* change */
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="simple.css">
</head>

<body>
  <div class="banner"></div>

  <div class="moduleContainer">
    <div class="moduleImage"></div>
    <div class="moduleInner"></div>

  </div>

</body>

</html>

score 0 · Answer 3 · answered Mar 07 '20 at 15:54

you can use calc css3 calc see example:

body {
 background-color: #908787;
}


.banner {
 position: fixed;
 width: 101%;
 margin: -1%;
 height: 35%;
 background-color: #76568e;
}

.moduleContainer {
 position: absolute;
 font-family: 'Bellota', cursive;
 background-color: #e2e2e2;
 top: 25%;
 left: 20%;
 border-style: solid;
 border-radius: 20px;
 border-color: #cacaca;
 width: 60%;
 height: 400px;
}

.moduleInner {
 display: inline-block;
 position: relative;
 top: -130px;
 width: 100%;
 height: 70%;
 
}

.moduleImage {
 position: relative;
 border-radius: 100%;
 background-color: #908787;
 height: 250px;
 width: 250px;
 top: -130px;
 left: calc(50% - 125px); /* just this line changed */
}

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link href="https://fonts.googleapis.com/css?family=Bellota&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="simple.css">
</head>
<body>
 <div class="banner"></div>

<div class="moduleContainer">
 <div class="moduleImage"></div>
 <div class="moduleInner"></div>
  
</div>

</body>
</html>

everything is same.

just in .moduleImage class i changed left property to left: calc(50% - 125px);

125px is half of element width.

score -1 · Answer 4 · answered Mar 07 '20 at 16:04

update your code by

.moduleContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    font-family: 'Bellota', cursive;
    background-color: #e2e2e2;
    top: 50%;
    left: 20%;
    border-style: solid;
    border-radius: 20px;
    border-color: #cacaca;
    width: 60%;
    height: 400px;
}
.moduleInner {
    display: inline-block;

    height: 70%;
}
.moduleImage {
    border-radius: 100%;
    background-color: #908787;
    height: 250px;
    width: 250px;
}

I hope this work

CSS Centering div on other

4 Answers4