How to position HTML bordered box in the centre

Question

I am trying to place a fully responsive text box in the centre of the page inside of an image. I haven't had any trouble placing the text box on the image but for some reason I am having trouble centring the box. I have tried reviewed and looked over multiple tutorials and stack overflow answers but nothing has been helpful. I have tried both width: 50% and margins but neither have worked. Attached below is my code. Again, I am fully aware that there are multiple answers to this question but none seem to work. Thanks a lot for the help it is highly appreciated!

<html>
<head>
<style>

.back {
    min-width: 100%;
}

.title {
    font-size: 90px;
    color: white;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-top: -483px;
}

.square {
    position: relative;
    width: 50%;
    background-color: white;
    border: 8px solid #686868;
    height: 100px;
    text-align: center;
    margin-top: 225px;
}

.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
}


</style>
</head>

<body>

<img src="orilliaback.jpg" class="back" height=500 />

<div class="title">Orillia, Ontario</div>

<div class="square">
    <div class="content">
        Welcome to Orillia!
    </div>    
</div>

</body>

</html>

Again, thank you very much!

Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — perseusl, Jun 09 '17 at 03:04

score 1 · Accepted Answer · answered Jun 09 '17 at 02:47

Add margin:0 auto to .square :

.square {
    position: relative;
    width: 50%;
    background-color: white;
    border: 8px solid #686868;
    height: 100px;
    text-align: center;
    margin-top: 225px;
    margin: 0 auto;/*/<-------------Added/*/
}

Full Code:

.back {
    min-width: 100%;
}

.title {
    font-size: 90px;
    color: white;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-top: -483px;
}

.square {
    position: relative;
    width: 50%;
    background-color: white;
    border: 8px solid #686868;
    height: 100px;
    text-align: center;
    margin-top: 225px;
    margin: 0 auto;
}

.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
}

<img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg" class="back" height=500 />

<div class="title">Orillia, Ontario</div>

<div class="square">
    <div class="content">
        Welcome to Orillia!
    </div>    
</div>

score 0 · Answer 2 · answered Jun 09 '17 at 02:53

Just use flex-box ;)

More info: link

<html>
<head>
<style>

.back {
    min-width: 100%;
}

.title {
    font-size: 90px;
    color: white;
    font-family: 'Oswald', sans-serif;
    text-align: center;
    margin-top: -483px;
}

.square {
    position: relative;
    width: 50%;
    background-color: white;
    border: 8px solid #686868;
    height: 100px;
    text-align: center;
    margin-top: 225px;
}

.square:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;

   display:flex;
   justify-content: center;
   flex-direction: column
}


</style>
</head>

<body>

<img src="orilliaback.jpg" class="back" height=500 />

<div class="title">Orillia, Ontario</div>

<div class="square">
    <div class="content">
        Welcome to Orillia!
    </div>    
</div>

</body>

</html>

How to position HTML bordered box in the centre

2 Answers2