Having some trouble with centering a circular div in the middle of my Bootstrap Carousel using Flexbox. I'd like the carousel background to expand to cover the entire 100vh height and 100% width of the page.
The issue I'm facing is that the circle keeps showing up at the bottom of the page instead of being perfectly centered. While I've tried adjusting the top and margin-top properties for better alignment, I want to utilize Flexbox to achieve precise central positioning. Additionally, the background images never seem to fully cover the page.
Any assistance or guidance on this matter would be truly appreciated
#fullpage {
height:100vh;
width:100%;
}
.vertical-center{
display: flex;
justify-content: center;
align-items: center;
}
.circle{
background-color: #ff9933;
/* margin-top:-300px; */
z-index: 300;
position: absolute;
height: 480px;
width:480px;
border-radius: 50%;
/* top:15%; */
}
.process-container {
position: relative;
}
.circle-text {
text-align: center;
color: white;
font-family: 'Muli', sans-serif;
font-weight: 200;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Muli:200,300,400" rel="stylesheet">
<script src="app.js"></script>
</head>
<body>
<div id="fullpage">
<div id="process" class="vertical-center">
<div id="processCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#processCarousel" data-slide-to="1" class="active"></li>
<li data-target="#processCarousel" data-slide-to="2"></li>
<li data-target="#processCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner ">
<div class="item active ">
<div class="process-container">
<img src="https://images.pexels.com/photos/127673/pexels-photo-127673.jpeg?auto=compress&cs=tinysrgb&h=350" style="object-fit: cover; height:100vh; width:100%;">
<div class="vertical-center">
<div class="circle vertical-center">
<div class="circle-text">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolore?</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="process-container">
<img src="http://worldlandforms.com/landforms/wp-content/uploads/2015/03/Beach-1024x683.jpg" style="object-fit: cover; height:100vh; width:100%;">
<div class="vertical-center">
<div class="circle vertical-center">
<div class="circle-text">
<h1>Test2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolore?</p>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="process-container">
<img src="http://www.ucl.ac.uk/european-institute/events/2016-17/Ocean.png" style="object-fit: cover; height:100vh; width:100%;">
<div class="vertical-center">
<div class="circle vertical-center">
<div class="circle-text">
<h1>Test3</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolore?</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#processCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#processCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</body>