How to center a div on the edge of another div in SASS ?

Last Updated : 24 Apr, 2023

In this article, we will see how to centre a div on the edge of another div using SASS. SASS is an extension of CSS that stands for Syntactically Awesome Style Sheets. It helps us to create things like variables, nested rules, etc. So that we can reuse the code.

Centering a div on the edge of another div is not a difficult task. We can achieve it by using position property and bottom, top left and right properties. What we need to see is how Sass can reduce our work here.

Example: HTML Code: In HTML, we will create two div elements. One that is outside will be called outer div and another will be called inner div.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to centre a div on the 
        edge of another div
    </title>
 
    <link rel="stylesheet"
        type="text/css" href="style.css" />
</head>
 
<body>
    <div id="outer-div">
        <div id="inner-div"></div>
    </div>
</body>
 
</html>

SASS code: Sass is used to give general styling and to centering the inner div on the edge of the outer div. We create a mixin named prop with parameters for properties (height, width, background colour, and position ) so that we don’t need to write the same thing for both div elements. We can simply include this mixin and provide the value for properties. We use position property and put the left property value to 50% that will centre the inner div horizontally. The value of the bottom property is zero so that the inner div will be on the edge of the outer div.

SASS

// For properties of both div
@mixin prop ($height, $width, $bg, $pos) {
    height: $height;
    width: $width;
    background-color: $bg;
    position: $pos;
}
 
#outer-div {
    @include prop(190px, 50%, #0057D9, relative);
}
 
// Inner div properties
#inner-div {
    @include prop(70px, 70px, #8ebf42, absolute);
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
    padding: 3px;
}

Output:

Centre a Div on the edge of another div ( GFG)

Example 2: In this example, Centre a div on the side edge of another div. Everything in HTML will be the same. In Sass, we use the top property with a value 50% that will centre the inner div vertically and put the value of left property to zero so that the inner div will be on the side edge. Other than this piece of code rest will be the same.

SASS

#inner-div {
    @include prop(70px, 70px, #8ebf42, absolute);
    left: 0;
    transform: translate(0, -50%);
    top: 50%;
    padding: 3px;
}

Output:

Centre div on the left edge of another div(GFG)

Example 3 :

HTML Code: In this example, we create four div elements inside our outer div. We will see how to centre all the inner div elements on the edges of our outer div.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
    <div id="outer-div">
        <div id="top-div"></div>
        <div id="left-div"></div>
        <div id="right-div"></div>
        <div id="bottom-div"></div>
    </div>
</body>
 
</html>

Sass Code: In Sass, we create a mixin called prop that we include in all div elements. Similarly mixin small div is created for all div elements inside our outer div. We create another two mixins one is verticalcentre(mixin) that is for centering the div vertically. For centering the div vertically we provide the top value to 50%. In the verticalcentre(mixin), there is an if and else condition, if the value of right is given true then the value of right property will be zero else value of the left property will be zero, which will decide on which side edge it will be on. horizontalcentre(mixin) also have the same logic, but it will centre horizontally.

SASS

// Mixin for Common  properties of all div
@mixin prop($height, $width, $bg, $pos) {
    height: $height;
    width: $width;
    background-color: $bg;
    position: $pos;
}
 
// Div inside which we will centre another divs
#outer-div {
    @include prop(190px, 400px, #0057D9, relative);
}
 
// Common properties of all small divs
@mixin smalldiv {
    @include prop(50px, 50px, #8ebf42, absolute);
    padding: 3px;
}
 
// Mixin for div that vertically centered
// on the edge
@mixin verticalcentre($right:false) {
    top: 50%;
    transform: translate(0, -50%);
    @if ($right) {
        right: 0;
    }
    @else {
        left: 0;
    }
}
 
// Mixin for div that are horizontally
// centered on the edge
@mixin horizontalcentre($top:false) {
    left: 50%;
    transform: translate(-50%);
    @if($top) {
        top: 0;
    }
    @else {
        bottom: 0;
    }
}
 
// Including mixin in each div
#top-div {
    @include smalldiv;
    @include horizontalcentre($top: true);
}
 
#bottom-div {
    @include smalldiv;
    @include horizontalcentre($top: false);
}
 
#right-div {
    @include smalldiv;
    @include verticalcentre($right: true);
}
 
#left-div {
    @include smalldiv;
    @include verticalcentre($right: false);
}