Bootstrap Circle Modal - html

Question

I am trying to create a bootstrap modal in a circular Form. Already created one but my problem is how can i insert the Text in the middle of the circle modal responsively?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-content {
background-color: #0099FF;
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
}
</style>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>

Answer 1

Flex box will help you, and I have removed padding-top that was pushing content in bottom. for height I have used height:100vw and max-height:600px that will make box proper circle shape.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.modal-content {
background-color: #0099FF;
position: relative;
border-radius: 50%;
width: 100%;
height: 100vw;
display: flex;
justify-content: center;
align-items: center;
max-height: 600px;
}
</style>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
Content
</div>
</div>
</div>

Answer 2

Append a div to model-content and give it position:absolute and position it to be in the center
<style>
.modal-content {
background-color: #0099FF;
position: relative;
border-radius: 50%;
width: 100%;
height: auto;
padding-top: 100%;
}
#text {
position: absolute;
top:50%;
left:45%;
}
</style>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div id="text">Lorem ipsum</div>
</div>
</div>
</div>
Here's an example : http://www.bootply.com/kBT3elyYFV