我想在窗口的中心放置一个div（with position:absolute；）元素。但我在这样做时遇到了问题，因为宽度未知。
我尝试了以下CSS代码，但它需要调整，因为宽度是响应的。
.center {
left: 50%;
bottom: 5px;
}
我怎样才能做到这一点？
据我所知，对于未知的宽度，这是不可能实现的。
如果这在您的场景中有效，您可以绝对定位一个100%宽度和高度的不可见元素，并使用margin:auto和可能的垂直对齐将元素居中。否则，您将需要JavaScript来执行此操作。
这里有一个有用的jQuery插件来实现这一点。我在这里找到的。我不认为纯粹使用CSS是可能的。
/**
* @author: Suissa
* @name: Absolute Center
* @date: 2007-10-09
*/
jQuery.fn.center = function() {
return this.each(function(){
var el = $(this);
var h = el.height();
var w = el.width();
var w_box = $(window).width();
var h_box = $(window).height();
var w_total = (w_box - w)/2; //400
var h_total = (h_box - h)/2;
var css = {"position": 'absolute', "left": w_total + "px", "top":
h_total + "px"};
el.css(css)
});
};
<body><div style=“position:absolute；left:50%；”><div style=“位置：相对；左：-50%；边框：红色虚线1px；”>我是一些中心收缩以适应内容<br/>翻土；翻土</div></div></body>
这对我有用：
#内容{位置：绝对；左：0；右：0；左边距：自动；右边距：自动；宽度：100px；/*需要特定的值才能工作*/}<body>＜div＞<div id=“content”>我是内容</div></div></body>
我只是想补充一句，如果有人想用一个div标记来完成，那么这里是解决方法：
宽度为900px。
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
在这种情况下，应该事先知道宽度。
我想补充一下bobince的回答：
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
改进：///这使得水平滚动条不会在居中的div中出现大元素。
<body>
<div style="width:100%; position: absolute; overflow:hidden;">
<div style="position:fixed; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</div>
</body>
我使用了类似的解决方案：
#styleName {
position: absolute;
margin-left: -"X"px;
}
其中“X”是要显示的div宽度的一半。它适用于所有浏览器。
在寻找解决方案时，我得到了前面的答案，可以将内容以Matthias Weiler的答案为中心，但使用文本对齐：
#content{
position: absolute;
left: 0;
right: 0;
text-align: center;
}
它与谷歌Chrome和Firefox配合使用。
这是我想出的一个技巧，让DIV精确地浮在页面的中心。当然，它确实很难看，但它适用于所有浏览器。
点和虚线
<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
<table style="position:fixed;" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="width:200;border: 5 dashed green;padding:10">
Perfectly Centered Content
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
</div>
清洁工
哇，那五年刚刚过去，不是吗？
<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="padding:10px">
<img src="Happy.PM.png">
<h2>Stays in the Middle</h2>
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
</div>
尽量不要使用CSS的阴暗面。避免使用负值作为边距。我知道有时候你会被迫做一些糟糕的事情，比如左边距：-450px，但你可能会做一些右边距：450px。这只是我的工作方式。
您可以将图像放置在一个div中，添加一个div id，并让该div的CSS具有文本align:center:
HTML格式：
<div id="intro_img">
<img src="???" alt="???">
</div>
CSS:
#intro_img {
text-align: center;
}
HTML格式：
<div class="wrapper">
<div class="inner">
content
</div>
</div>
CSS:
.wrapper {
position: relative;
width: 200px;
height: 200px;
background: #ddd;
}
.inner {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: 100px;
height: 100px;
background: #ccc;
}
这里还有更多的例子。
绝对中心
HTML格式：
<div class="parent">
<div class="child">
<!-- content -->
</div>
</div>
CSS:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
演示：http://jsbin.com/rexuk/2/
它在Google Chrome、Firefox和Internet Explorer 8中进行了测试。
我首选的定心方法：
position: absolute;
margin: auto;
width: x%
绝对块元素定位保证金自动左/右、上/下相同
一个JSFiddle在这里。
响应式解决方案
如果您不需要支持IE8或更低版本，这里有一个很好的解决方案，可用于响应设计或未知尺寸。
.centered-axis-x {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.外部{位置：相对；/*或绝对值*//*不必要的样式设置财产*/保证金：5%；宽度：80%；高度：500px；边框：1px纯红色；}.内部{位置：绝对；左：50%；顶部：50%；转换：转换（-50%，-50%）；/*不必要的样式设置财产*/最大宽度：50%；文本对齐：居中；边框：1px纯蓝色；}<div class=“outer”><div class=“inner”>我总是居中<br/>无论我有多少文本、高度或宽度<br/>维度或我的父级也不相关</div></div>
这是一个JS Fiddle
线索是，剩下的：50%是相对于父对象的，而平移变换是相对于元素宽度/高度的。
这样，您就拥有了一个完全居中的元素，子元素和父元素都具有灵活的宽度。奖励：即使孩子比父母大，这也能奏效。
您也可以使用此选项垂直居中（同样，父级和子级的宽度和高度可以完全灵活（和/或未知））：
.centered-axis-xy {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
请记住，您可能还需要以转换供应商为前缀。例如-webkit转换：translate（-50%，-50%）；
#container
{
position: relative;
width: 100%;
float: left
}
#container .item
{
width: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
}
HTML
<div id='parent'>
<div id='centered-child'></div>
</div>
CSS
#parent {
position: relative;
}
#centered-child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
http://jsfiddle.net/f51rptfy/
这适用于垂直和水平：
#myContent{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
如果要使父对象成为元素中心，请设置父对象的相对位置：
#parentElement{
position: relative
}
对于垂直居中对齐，请设置元素的高度。感谢劳尔。如果要使父对象成为元素中心，请将父对象的位置设置为相对位置
HTML格式：
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
我知道我已经给出了答案，我之前的答案和其他人的答案都很好。但我在过去使用过这个，它在某些浏览器和某些情况下效果更好。所以我想我也会给出这个答案。我没有“编辑”我之前的答案并添加它，因为我觉得这是一个完全独立的答案，我提供的两个答案并不相关。
Sass/Compass版本的先前响应解决方案：
#content {
position: absolute;
left: 50%;
top: 50%;
@include vendor(transform, translate(-50%, -50%));
}
这对我有用：
<div class="container><p>My text</p></div>
.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
#内容｛margin:0自动；显示：表格；float:none；｝<body>＜div＞<div id=“content”>我是内容</div></div></body>
我知道这个问题已经有了一些答案，但我从来没有找到一个能在几乎所有的类中都适用的解决方案，它也很有意义，而且很优雅，所以这里是我经过调整后的看法：
.容器{位置：相对；}.container.cat链接{位置：绝对；左：50%；顶部：50%；变换：translate3d（-50%，-50%，0）；z指数：100；文本转换：大写；/*强制CSS将其视为文本，而不是纹理，这样就不会出现更模糊的错误*/背景色：白色；}.色块{高度：250px；宽度：100%；背景色：绿色；}<div class=“container”><a class=“cat link”href=“”>类别</a><div class=“color block”></div></div>
这是说给我一个顶部：50%，左侧：50%，然后在X/Y轴上变换（创建空间）到-50%的值，在某种意义上“创建镜像空间”。
因此，这会在div的所有四个点上创建一个相等的空间，它始终是一个长方体（有四条边）。
这将：
工作时不必知道父对象的高度/宽度。致力于响应。在X轴或Y轴上工作。或者两者兼而有之，就像我的例子一样。我不能想出一个不起作用的情况。
一个简单的方法，对我来说，可以将一个未知宽度的块水平居中：
<div id="wrapper">
<div id="block"></div>
</div>
#wrapper {
position: absolute;
width: 100%;
text-align: center;
}
#block {
display: inline-block;
}
文本对齐属性可以添加到#block规则集，以独立于块的对齐方式对齐其内容。
这在Firefox、Chrome、Internet Explorer、Edge和Safari的最新版本上有效。
这适用于您希望在容器元素中心具有的绝对定位元素的任意未知宽度：
Demo
<div class="container">
<div class="box">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
</div>
.container {
position: relative;
width: 100%;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
如果元素具有宽度和高度，则此解决方案有效
.包装器{宽度：300px；高度：200px；背景色：番茄；位置：相对；}.内容{宽度：100px；高度：100px；背景色：深蓝色；位置：绝对；顶部：0；右：0；底部：0；左：0；边距：自动；}<div class=“wrapper”><div class=“content”></div></div>
这个问题的公认解决方案不适用于我的情况。。。
我正在为一些图片做字幕，我用这个解决了这个问题：
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
数字{位置：相对；宽度：325px；显示：块}图标题{位置：绝对；背景：#FFF；宽度：120px；填充：20px；-webkit框阴影：0 0 30px灰色；方框阴影：0 0 30px灰色；边界半径：3px；显示：块；顶部：0；左：0；右：0；左边距：自动；右边距：自动；显示：柔性；对齐项目：居中；}<图><img src=“https://picsum.photos/325/600"><figcaption>但也一样</figcaption></figure>
.center {
position: absolute
left: 50%;
bottom: 5px;
}
.center:before {
content: '';
display: inline-block;
margin-left: -50%;
}
Flexbox可用于对绝对定位的div。
display: flex;
align-items: center;
justify-content: center;
.相对{宽度：275px；高度：200px；背景：皇家蓝；颜色：白色；边距：自动；位置：相对；}.绝对块{位置：绝对；高度：36px；背景：橙色；填充：0px 10px；底部：-5%；边框：1px实心黑色；}.居中文本{显示：柔性；对齐内容：中心；对齐项目：居中；盒子阴影：1px 2px 10px 2px rgba（0、0、0和0.3）；}<div class=“relative center text”>相对块（Relative Block）绝对块</div></div>
您还可以创建中间件div#centered框，以绝对值、左财产和右财产居中，不带width属性，然后将主内容div设置为其具有display:inline-block框的子项，并使用为其中间件父框设置的text-align:center将其居中
#集装箱{位置：相对；宽度：300px；高度：300px；边框：实心1px蓝色；颜色：#DDDDD；}#居中{位置：绝对；文本对齐：居中；边距：自动；顶部：20px；左：0；右：0；边框：1px红色虚线；填充：10px 0px；}#居中>div{边框：实心1px红色；显示：内联块；颜色：黑色；}<div id=“container”>你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界<div id=“center”>＜div＞你好世界<br/>我不知道我的宽度<br/>但我还是绝对的！</div></div></div>
这是对我们有用的其他答案的混合：
.el {
position: absolute;
top: 50%;
margin: auto;
transform: translate(-50%, -50%);
}
响应式解决方案
假设div中的元素是另一个div。。。
此解决方案运行良好：
<div class="container">
<div class="center"></div>
</div>
容器可以是任何大小（必须是相对位置）：
.container {
position: relative; /* Important */
width: 200px; /* Any width */
height: 200px; /* Any height */
background: red;
}
元素（div）也可以是任何大小（必须小于容器）：
.center {
position: absolute; /* Important */
top: 50%; /* Position Y halfway in */
left: 50%; /* Position X halfway in */
transform: translate(-50%,-50%); /* Move it halfway back(x,y) */
width: 100px; /* Any width */
height: 100px; /* Any height */
background: blue;
}
结果将是这样的。运行代码段：
.容器{位置：相对；宽度：200px；高度：200px；背景：红色；}.中心{位置：绝对；顶部：50%；左：50%；转换：转换（-50%，-50%）；宽度：100px；高度：100px；背景：蓝色；}<div class=“container”><div class=“center”></div></div>
我觉得这很有帮助。
由于我不想更改容器/包装器元素的样式，所以这些解决方案都不适合我。这段代码对我有用：
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
<div style='position:绝对；左：50%；顶部：50%；转换：转换（-50%，-50%）'>此文本居中。</div>
这将使div中的所有对象居中，位置类型为static或relative。
只需使用一个新的div包装您的内容并使用display flex，然后使用align-items:center；并调整内容：中心；看看。。。
<div class="firstPageContainer">
<div class="firstPageContainer__center"></div>
</div>
.firstPageContainer{
display: flex;
width: 1000px;
height: 1000px;
justify-content: center;
align-items: center;
background-color: #FF8527;
}
.firstPageContainer__center{
position:absolute;
width: 50px;
height: 50px;
background-color: #3A4147;
}
可以使用calc（）将纵横比为1的元素与位置绝对值居中
在下面的示例中，我使用了一个圆，因为它更容易解释和理解，但相同的概念可以应用于任何具有纵横比的形状：1表示宽度和高度相等。（关于纵横比）
：根目录{--直径：80px；}第二部分{位置：绝对；顶部：计算（50%-var（--直径）/2）；右：计算（50%-var（--直径）/2）；纵横比：1；width:var（--直径）；边界半径：100%；背景：蓝色；}＜div/＞
解释
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
- 我怎么能检查html元素，从DOM消失失去焦点?
- 谷歌Chrome表单自动填充和它的黄色背景
