html – 如何居中绝对定位的项目

概述我想绝对在我的图像上放置一个文本,但它似乎并没有居中.我尝试了一些东西,但这很奇怪.我正在寻找一个响应式网站,但随之而来的,它看起来很奇怪.这是我的代码. HTML <div id="container"></div><div class="parent"> <div class="child"> <h1> Richy Photography </h1> </di 我想绝对在我的图像上放置一个文本,但它似乎并没有居中.我尝试了一些东西,但这很奇怪.我正在寻找一个响应式网站,但随之而来的,它看起来很奇怪.这是我的代码.

HTML

<div ID="container"></div><div >    <div >        <h1> Richy Photography </h1>    </div></div>

CSS

#container {    position:absolute;    top:0;    left:0;    wIDth:100%;    height:100%;    background-image:url(image.jpg);    background-size:cover;    background-position:50% 50%;    background-repeat: no-repeat;}body,HTML{    height:100%;    wIDth:100%;}.parent {    position:relative;    Font-family: Helvetica,Arial,sans-serif;    wIDth: 100%;    height: 100%;    margin:0;    padding:0;}.child {    position: absolute;    left:37%;    top:37%;    margin:0;    padding:0;}

解决方法 由于37％的顶部和左侧偏移,如果视口太小,文本将显示在屏幕外.

一个更简单的解决方案是简单地将.parent元素设置为显示为表格,然后将.child元素设置为显示为具有水平和垂直对齐内容的表格单元格：

.parent {    display: table;    height: 100%;    wIDth: 100%;}.child {    display: table-cell;    text-align: center;    vertical-align: mIDdle;}

JSFiddle demo.

从ie8开始,all modern browsers支持此功能.

为了使内容显示在背景图像之上,您需要为.parent元素提供更高的z-index属性并为其提供相对定位：

.parent {    display: table;    height: 100%;    position: relative;    wIDth: 100%;    z-index: 2;}

JSFiddle demo.

虽然您可以简单地为.parent元素提供背景并完全删除#container元素.

总结

以上是内存溢出为你收集整理的html – 如何居中绝对定位的项目全部内容，希望文章能够帮你解决html – 如何居中绝对定位的项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。