所以，我有一个图像，我想在它的中心显示一些文字。
代码：
.img {
position: relative;
}
.img h3 {
position: absolute;
width: 100%
top: 85px;
text-align: center;
}
好的，所以我设法做到了。但事情就是这样：当我调整浏览器大小并且图像变小时，文本就会出现在图像中。
所以我的问题是，我是否必须对所有不同维度使用@media规则？我怎么知道我的CSS中使用哪些尺寸？
或者我可以做些什么，所以我的文本元素总是留在图像中？
提前谢谢。
答案 0 :(得分：6)
你可以使用许多不同的选项，每个选项都有其优点和缺点。缺点和浏览器支持的差异：
Flexbox是您拥有的最简单的选项，不使用表格或不必将您的元素从文档流程中删除，但它不像其他可行选项那样受到广泛支持。我相信它很快就会到来。
<强>代码：
/* --- CSS --- */
.background {
height: 10em;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
font-family: sans-serif;
}<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
使用此选项时，您必须确保：
（查看说明＃2）
<强>代码：
/* --- CSS --- */
.background {
height: 10em;
text-align: center;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
margin: 0 auto;
font-family: sans-serif;
line-height: 5em; /* container height / 2 */
}<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
这可能是最常用的方法，因为它得到了广泛支持，但它的缺点是使元素（title）脱离正常流程。
<强>代码：
/* --- CSS --- */
.background {
height: 10em;
position: relative;
background-size: cover;
background-position: center;
}
.background > h4 {
top: 50%;
left: 50%;
margin: 0;
color: #000;
font-size: 2em;
position: absolute;
font-family: sans-serif;
transform: translate(-50%, -50%);
}<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
好吧，我可能会被私刑，如果有人发现这一点，但您可以使用 display: table 作为容器， display: table-cell 利用对齐表格的标题。
您现在可以将标题集中在一起：
text-align: center 和vertical-align: middle <强>代码：
/* --- CSS --- */
.background {
width: 100%;
height: 10em;
display: table;
background-size: cover;
background-position: center;
}
.background > h4 {
color: #000;
font-size: 2em;
text-align: center;
display: table-cell;
vertical-align: middle;
font-family: sans-serif;
}<!--- HTML --->
<div class = "background" style = "background-image: url(https://images.freecreatives.com/wp-content/uploads/2015/05/HD-Vintage-Photography-Wallpaper.jpg);">
<h4>Hello, world!</h4>
</div>
div ，因此必须始终明确定义 height 。line-height垂直居中元素要求line-height 等于到父级的高度。在这种情况下，使用 50%父级，因为标题的font-size为2x font-size父母及其也以ems表示。@media 查询，它不应该用于简单的内容，例如居中文本，而是用于根据屏幕大小显示/隐藏元素等。 px （像素），而是使用% （ems）更新> em （百分比）通过使用 font-size 查询手动更新容器的 @media 。答案 1 :(得分：1)
使用top: 50%;，left: 50%;和transform: translate(-50%, -50%);。
这些天非常普遍的技巧，具有出色的浏览器支持。重要的是要注意，您需要为.img指定一些高度，以便正确定位内部元素。在这个例子中，我使用vh单位来表示身高的真实感。调整大小。
我也更喜欢使用背景图像来处理这样的事情，因为它使得标记变得更加容易。您要么想要使用background-image，要么在<img>内添加div.img标记。
.img {
position: relative;
width: 100%;
height: 50vh;
background: #ccc;
background-image: url('https://images.unsplash.com/photo-1474693220100-7cddec4346f6?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=');
background-size: cover;
background-position: 50% 50%;
}
.img h3 {
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: 0 auto;
transform: translate(-50%,-50%);
font-family: sans-serif;
color: white;
font-size: 26px;
}<div class="img">
<h3>Hello, world!</h3>
</div>
答案 2 :(得分：0)
每次调整屏幕大小时，请勿使用媒体查询来居中文本。以下解决方案将起作用。
CSS
.container {
position: relative;
}
.center {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
HTML
<div class="container">
<img src="" >
<div class="center">Centered</div>
</div>