Fatal编程技术网
  • css/
  • 将元素居中放置一个“；绝对的；CSS中的位置和未定义的宽度？

将元素居中放置一个“；绝对的；CSS中的位置和未定义的宽度？

css

将元素居中放置一个“；绝对的；CSS中的位置和未定义的宽度？,css,css-position,center,absolute,Css,Css Position,Center,Absolute,我需要在窗口的中心放置一个div（带位置：绝对；）元素。但是我在这样做时遇到了问题，因为宽度未知 我试过这个。但它需要调整，因为宽度是有响应的 .center { left: 50%; bottom: 5px; } 我该怎么做呢？据我所知，对于未知的宽度，这是不可能实现的 如果这在您的场景中起作用，您可以绝对定位一个100%宽度和高度的不可见元素，并使用margin:auto（自动）和vertical align（可能是垂直对齐）将元素居中。否则，您将需要JavaScript来完成此操

我需要在窗口的中心放置一个
div
（带
位置：绝对；
）元素。但是我在这样做时遇到了问题，因为宽度未知

我试过这个。但它需要调整，因为宽度是有响应的

.center {
  left: 50%;
  bottom: 5px;
}
我该怎么做呢？

据我所知，对于未知的宽度，这是不可能实现的

如果这在您的场景中起作用，您可以绝对定位一个100%宽度和高度的不可见元素，并使用margin:auto（自动）和vertical align（可能是垂直对齐）将元素居中。否则，您将需要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)
    });
};


我是一个中心收缩，以适应内容

图姆特图姆
这对我很有用：

#内容{
位置：绝对位置；
左：0；
右：0；
左边距：自动；
右边距：自动；
宽度：100px；/*需要特定值才能工作*/
}

我是内容
我只想补充一点，如果有人想用一个div标签来完成这项工作，那么下面是解决方法：

将
宽度
作为
900px

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}
在这种情况下，人们应该事先知道宽度。

我想补充一下：


我是一个中心收缩，以适应内容

图姆特图姆
改进：///这使得水平滚动条不会在居中的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>


我是一个中心收缩，以适应内容

图姆特图姆
在搜索解决方案时，我得到了前面的答案，可以使内容以为中心，但使用
文本对齐
：

#content{
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}
它与Google 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>


停留在中间
HTML：

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>
此示例和更多示例。

绝对中心

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

.parent {
  position: relative;
}

.child {
  position: absolute;
  
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}
演示：

它在Google Chrome、Firefox和。

我首选的定心方法：

position: absolute;
margin: auto;
width: x%
  • 绝对块元素定位
  • 保证金自动
  • 左/右、上/下相同
JSFIDLE是响应性强的解决方案。

如果您不需要支持IE8及更低版本，这里是一个很好的解决方案，用于响应性设计或未知尺寸

.outer{
位置：相对；/*或绝对*/
/*不必要的样式属性*/
利润率：5%；
宽度：80%；
高度：500px；
边框：1px纯红；
}
.内部{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
/*不必要的样式属性*/
最大宽度：50%；
文本对齐：居中；
边框：1px纯蓝色；
}

无论我有多少文字、高度或宽度，我总是居中。
尺寸或我的父项也不相关
HTML

这适用于垂直和水平方向：

#myContent{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
如果要使父元素成为元素中心，请设置父元素的相对位置：

#parentElement{
    position: relative
}

.container {
    position: relative; /* Important */
    width: 200px; /* Any width */
    height: 200px; /* Any height */
    background: red;
}
  • 对于“垂直中心对齐”，请设置图元的高度

  • 如果要使父元素居中，请将父元素的位置设置为“相对”

HTML：

<div id='parent'>
  <div id='child'></div>
</div>
我知道我已经提供了一个答案，我之前的答案和其他人的答案都很好。但我过去也用过，它在某些浏览器和特定情况下工作得更好。所以我想我也会给出这个答案。我没有“编辑”我以前的答案并添加它，因为我觉得这是一个完全独立的答案，我提供的两个答案没有关系。

/先前响应式解决方案的版本：

这对我很有用：

<div class="container><p>My text</p></div>

.container{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;



#内容{margin:0自动；display:table；float:none；}



我是内容

我知道这个问题已经有了一些答案，但我从来没有找到一个解决方案，可以适用于几乎所有的类，它也有意义，而且很优雅，所以我在调整了一系列之后采取了以下措施：



.container{
位置：相对位置；
}
.container.cat链接{
位置：绝对位置；
左：50%；
最高：50%；
转换：translate3d（-50%，-50%，0）；
z指数：100；
文本转换：大写；/*强制CSS将其视为文本，而不是纹理，因此不再有模糊错误*/
背景色：白色；
}
.色块{
高度：250px；
宽度：100%；
背景颜色：绿色；
}


这适用于您希望位于容器元素中心的绝对定位元素的任意未知宽度：




<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;
}




.集装箱{
位置：相对位置；
宽度：100%；
}
.盒子{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

如果元素具有
宽度
和
高度



.wrapper{
宽度：300px；
高度：200px；
背景色：番茄；
位置：相对位置；
}
.内容{
宽度：100px；
他

#parentElement{
    position: relative
}



<div id='parent'>
  <div id='child'></div>
</div>



#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}



#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;
}



<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;
}



top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;



.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}



display: flex;
align-items: center;
justify-content: center;



left: 50%;
top: 50%;
transform: translate(-50%, -50%);



<div class="container">
  <div class="center"></div>
</div>



.container {
    position: relative; /* Important */
    width: 200px; /* Any width */
    height: 200px; /* Any height */
    background: red;
}



.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;
}



position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;



<div style='position:absolute; left:50%; top:50%; transform: translate(-50%, -50%)'>
    This text is centered.
</div>