CSS responsive circle with centered content
CSS Responsive Centered Circle
In this article, we’ll show you how to use CSS to create a responsive circular container and center content within it.
Read more: CSS Tutorial
1. Creating a Circular Container
First, we need to create a circular container. In CSS, we can achieve this effect using the border-radius property. By setting the border-radius value to 50%, we can transform a square container into a circle. Here is a sample code:
.circle-container {
width: 200px;
height: 200px;
background-color: #eaeaea;
border-radius: 50%;
}
In the above code, we create a container with a width and height of 200px and set the background color to #eaeaea, which is a light gray. By setting the border-radius to 50%, the container will appear circular.
2. Centering Content
Next, we need to center the content within the circular container. To achieve this, we can use the CSS flexbox layout properties.
.circle-container {
display: flex;
align-items: center;
justify-content: center;
}
By setting the value of display to flex, we can convert the circular container into a flex container. The align-items and justify-content properties are used to center the content vertically and horizontally within the container, respectively.
3. Responsive Adjustment
To make this circular container and its centered content adapt to different screen sizes, we can use CSS media queries.
@media screen and (max-width: 600px) {
.circle-container {
width: 150px;
height: 150px;
}
}
In the above code, we use the @media keyword and the screen and (max-width: 600px) condition, indicating that the styles in the media query are applied when the screen width is 600px or less. By redefining the container’s width and height in the media query, we can make it appear smaller on small screens.
4. Example
Below is a complete example demonstrating how to create a responsive circular container and center its content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.circle-container {
width: 200px;
height: 200px;
background-color: #eaeaea;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 600px) {
.circle-container {
width: 150px;
height: 150px;
}
}
</style>
</head>
<body>
<div class="circle-container">
<h1>Centered title</h1>
<p>This is a centered text. </p>
</div>
</body>
</html>
In the above example, we create an HTML file with a circular container and display a centered title and text within it. When the screen width is 600px or less, the width and height of the container automatically adjust to 150px.
Summary
This article demonstrated how to create a responsive circular container using CSS and center its content. By setting the border-radius property, we can transform a square container into a circle. Using flexbox layout properties, we can center the content within the container. Using media queries, we can make the circular container and its centered content adapt to different screen sizes. I hope this article helps you create responsive circular containers in CSS!