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 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 PHP acos( ) Function Trigonometry is an important part of mathematics and PHP’s math functions provides us with some functions which are very useful for calculations involving trigonometry. One of such function is acos() function. The acos() function in PHP is used to find the arc cosine of a number in radians. We alrea 2 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 Less.js Math abs() Function Less (Leaner Style Sheets) is an extension to normal CSS code which is basically used to enhance the abilities of normal CSS code and provide it superpowers. The abs() function is a type of Math function in Less.js (which is basically used to perform mathematical operations). The abs() function is u 2 min read Less.js Math acos() Function Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS is a dynamic style sheet language, it was chosen. Because LESS is adaptable, it works with a wide range of browsers. Only CSS that has been written in 3 min read Tensorflow.js tf.abs() Function Tensorflow.js is an open-source library developed by Google for running machine learning models as well as deep learning neural networks in the browser or node environment. The .abs() function is used to find the absolute value of the stated element. Syntax :  tf.abs (x)Parameters:  x: It is the t 2 min read Less.js Math asin() Function Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It was chosen because CSS is a dynamic style sheet language. LESS is flexible, so it works with a variety of browsers. Web browsers can only use CSS that has been 3 min read Like