CSS abs() Function Last Updated : 10 May, 2023 Comments Improve Suggest changes Like Article Like Report The abs() function in CSS takes a single argument, which can be a numeric value or a mathematical expression and returns the absolute value of the input, which is the distance from zero regardless of the input's sign. One of the most common use cases for abs() is in creating responsive designs. Syntax: abs(expression) Parameters: This function only accepts a single parameter. expression: It is a calculation that finally returns a number. Return Value: It returns the absolute value of the parameter expression. Example 1: In this example we have used the .my-element class to set the width of the <div> element to 50% of its parent's width minus 100 pixels, using the abs() function. It also sets a max-width of 500 pixels to ensure that the element does not grow too wide. HTML <!DOCTYPE html> <html> <head> <title>CSS abs() function</title> <style> .gfg { --font-size: 10px; width: abs(var(var(--font-size))); max-width: 300px; height: 100px; background-color: green; } h3 { text-align: center; color: #fff; } </style> </head> <body> <div class="gfg"> <h3>GFG</h3> </div> </body> </html> Output: Example 2: This example demonstrates how abs() can be used to center an element horizontally within its parent element. HTML <!DOCTYPE html> <html> <head> <title> Centering an element with abs() function </title> <style> .parent { width: 400px; height: 300px; background-color: gray; display: flex; justify-content: center; align-items: center; } .child { width: 150px; height: 150px; background-color: red; margin-left: abs((100% - 150px) / 2); } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html> Output: Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/abs Supported browsers: The browsers supported by the abs() function are listed below: Safari 15.4Safari on iOS Comment More infoAdvertise with us Next Article CSS abs() Function M maheshgaikwad Follow Improve Article Tags : Web Technologies CSS CSS-Functions Similar Reads CSS calc() Function The calc() function is an inbuilt CSS function used to perform calculations to determine CSS property values dynamically. This function allows combining different units, such as percentages and pixels, using basic arithmetic operations like addition, subtraction, multiplication, and division. This a 4 min read CSS types.asin() Function The inverse sine of an integer between -1 and 1 is returned by the trigonometric asin() CSS function. The single computation in the function yields the number of radians that correspond to an angle between -90deg and 90deg. Syntax: /* numeric values */ transform: rotate(asin(-0.9)); transform: rotat 2 min read CSS types.acos() Function The trigonometric acos() function in the CSS gives the inverse cosine of a value between -1 and 1. The single computation in the function yields the number of radians that correspond to an angle between 0 and 180 degrees. Syntax: /* numeric values */ transform: rotate(acos(-0.5)); transform: rotate( 2 min read PHP abs() Function The abs() function is an inbuilt function in PHP which is used to return the absolute (positive) value of a number. The abs() function in PHP is identical to what we call modulus in mathematics. The modulus or absolute value of a negative number is positive. Syntaxnumber abs( value )ParametersThe ab 1 min read p5.js abs() function The abs() function in p5.js is used to calculate the absolute value of a number. This function maps to the Math.abs() of javascript. A number's absolute value is always positive. Syntax abs(number) Parameters: The function accepts only one parameter as mentioned above and described below: number : T 1 min read Like