我试图在图像内部页面的中心放置一个完全响应的文本框。我将文本框放在图像上没有任何问题，但是由于某种原因，我无法将文本框居中。我尝试查看并查看了多个教程和堆栈溢出答案，但没有任何帮助。我尝试了两种宽度：50％和边距，但是都没有用。以下是我的代码。再一次，我完全意识到这个问题有多个答案，但似乎没有一个有效。非常感谢您的帮助，我们非常感激！
<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>再次感谢您！
最佳答案
将margin:0 auto添加到.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/*/
}
完整代码：
.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>