如何在div中将绝对定位的元素居中？

最新推荐文章于 2021-11-24 16:35:38 发布
最新推荐文章于 2021-11-24 16:35:38 发布
阅读量1k 收藏 1
点赞数
文章标签： css css-position center absolute
原文链接：https://stackoom.com/question/7SFv/如何在div中将绝对定位的元素居中
版权

我需要在窗口中心放置一个div （带有position:absolute; ）元素。 但是我遇到了问题，因为宽度未知 。

我试过了 但是，由于宽度是响应性的，因此需要对其进行调整。 

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

有任何想法吗？

#1楼

真的很好

以width为900px 。 

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

在这种情况下，应该事先知道width 。

#2楼

我想补充@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>

#3楼

在寻找解决方案时，我在上面得到了答案，并且可以使内容以Matthias Weiler的答案为中心，但使用text-align。 

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

使用chrome和Firefox。

#4楼

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

您可以-如果在您的情况下可行-绝对定位宽度和高度为100％的不可见元素，并使用margin：自动并可能垂直对齐在其中居中。 否则，您将需要Javascript来做到这一点。

#5楼

这是一个有用的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)
    });
};

#6楼

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

#7楼

我想出了一个技巧，可以使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>

#8楼

您可以将图像放置在div中并添加div ID，并使该div的CSS具有text-align:center

HTML： 

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS： 

#intro_img {
    text-align:center;
}

#9楼

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

这和更多的例子在这里

#10楼

绝对中心

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和IE8中测试

希望这可以帮助 ：）

#11楼

我首选的居中方法： 

position: absolute;
margin: auto;
width: x%
  • 绝对块元素定位
  • 保证金自动
  • 相同的左/右，上/下

JSFiddle 在这里

#12楼

响应式解决方案

如果您不需要支持IE8及更低版本，这通常是响应式设计或未知尺寸的好解决方案。 

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}


 .outer { position: relative; /* or absolute */ /* unnecessary styling properties */ margin: 5%; width: 80%; height: 500px; border: 1px solid red; } .inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* unnecessary styling properties */ max-width: 50%; text-align: center; border: 1px solid blue; } 
 <div class="outer"> <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div> </div>

这是一个JS小提琴

提示是left: 50%相对于父级，而translate转换相对于元素的宽/高。

这样，您将拥有一个完美居中的元素，并且在子元素和父元素上都具有灵活的宽度。 奖励：即使孩子比父母大，这也能起作用。

您也可以以此将它垂直居中（同样，父母和孩子的宽度和高度可以完全灵活（和/或未知））： 

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

请记住，您可能还需要transform供应商前缀。 例如-webkit-transform: translate(-50%,-50%);

#13楼

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

#14楼

的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/

#15楼

这项工作垂直和水平 

  #myContent{
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom:0;
        margin: auto;
   }

如果要使元素以父级为中心，请设置父级相对位置 

 #parentElement{
      position:relative
  }

编辑：

  • 对于垂直居中，将设置的高度与元素对齐。 感谢@Raul

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

#16楼

我知道我已经提供了答案，并且以前的答案以及给出的其他答案也很好用。 但是我过去曾经使用过它，它在某些浏览器和某些情况下效果更好。 所以我想id也要给出这个答案。 我没有“编辑”以前的答案并添加它，因为我觉得这是一个完全独立的答案，而我提供的这两个答案无关。

HTML： 

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

CSS： 

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

#17楼

响应式解决方案的sass / compass版本： 

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

#18楼

这为我工作： 

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

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

#19楼

 #content { margin:0 auto; display:table; float:none;} 
 <body> <div> <div id="content"> I'm the content </div> </div> </body>

#20楼

我知道这个问题已经有了一些答案，但是我还没有找到一个可以在几乎所有类中都可行并且很优雅的解决方案，因此，在调整一堆之后，这是我的看法： 

 .container { position: relative; } .container .cat-link { position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); z-index: 100; text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */ background-color: white; } .color-block { height: 250px; width: 100%; background-color: green; } 
 <div class="container"> <a class="cat-link" href="">Category</a> <div class="color-block"></div> </div>

这就是说给我一个top: 50% ，一个left: 50% ，然后在X / Y轴上都将（转换空间）转换为-50%值，在某种意义上是“创建镜像空间”。

因此，这将在div的所有4个点上创建相等的空间，该点始终是一个方框（具有4个边）。

这将：

  1. 无需知道父母的身高/宽度即可工作。
  2. 响应迅速。
  3. 在X或Y轴上加工。 或两者皆有，例如我的示例。
  4. 我无法提出无法解决的情况。

#21楼

一个对我有用的简单方法是将一个未知宽度的块水平居中： 

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

可以将文本对齐属性添加到#block规则集中，以独立于块的对齐方式对齐其内容。

这适用于最新版本的Firefox，Chrome，IE，Edge和Safari。

#22楼

您可以在容器元素的中心想要在绝对定位元素的任意未知宽度上工作。

演示版 

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

#23楼

如果元素具有width和height则此解决方案有效 

 .wrapper { width: 300px; height: 200px; background-color: tomato; position: relative; } .content { width: 100px; height: 100px; background-color: deepskyblue; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } 
 <div class="wrapper"> <div class="content"></div> </div>

#24楼

这个问题的解决方案不适用于我的情况。。我正在为一些图像添加标题，并且我解决了这个问题 

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

display: flex;
align-items: center;


 figure { position: relative; width: 325px; display: block } figcaption{ position: absolute; background: #FFF; width: 120px; padding: 20px; -webkit-box-shadow: 0 0 30px grey; box-shadow: 0 0 30px grey; border-radius: 3px; display: block; top: 0; left: 0; right: 0; margin-left: auto; margin-right: auto; display: flex; align-items: center; } 
 <figure> <img src="https://picsum.photos/325/600"> <figcaption> But as much </figcaption> </figure>

#25楼

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

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

#26楼

Flex可用于将绝对定位的div居中。 

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


 .relative { width: 275px; height: 200px; background: royalblue; color: white; margin: auto; position: relative; } .absolute-block { position: absolute; height: 36px; background: orange; padding: 0px 10px; bottom: -5%; border: 1px solid black; } .center-text { display: flex; justify-content: center; align-items: center; box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3); } 
 <div class="relative center-text"> Relative Block <div class="absolute-block center-text">Absolute Block</div> </div>

#27楼

如果您也需要水平和垂直居中： 

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

#28楼

您还可以创建中间件div#centered框，该框的absolute ， left ， right属性居中，没有width属性，然后将主内容div设置为其子级，并带有display:inline-block框，并以text-align:center为其设置text-align:center其中间件父盒 

 #container{ position: relative; width: 300px; height: 300px; border: solid 1px blue; color:#dddddd; } #centered{ position: absolute; text-align: center; margin: auto; top: 20px; left:0; right:0; border: dotted 1px red; padding: 10px 0px; } #centered>div{ border: solid 1px red; display:inline-block; color:black; } 
 <div id="container"> hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world <div id="centered"> <div> hello world <br/> I don't know my width<br/> but I'm still absolute! </div> </div> </div>

#29楼

这是对我们有用的其他答案的组合： 

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

#30楼

这对我有用： 

 #content { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; /* Need a specific value to work */ } 
 <body> <div> <div id="content"> I'm the content </div> </div> </body>

asdfgh0077
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
delphi 自定义消息框Messagebox居中
01-30
在Delphi编程环境中，自定义消息框（Messagebox）是一个常见的需求，特别是在需要提供与系统默认消息框不同的外观、功能或交互时。本篇将详细讲解如何实现自定义消息框并使其居中显示。 首先，我们需要理解Delphi中...
浅谈css处理水平居中的问题
09-24
这会将左右外边距自动分配，使元素在父容器中居中。以下是一个示例： ```css .fixed-width-element { width: 200px; margin: 20px auto; } ``` 这将在父容器中将宽度为200px的块元素水平居中。 3. **不定宽...
在Position:absolute下居中设置
weixin_30740295的博客
09-21 384
在DIV定位中有时候使用的是相对定位，而DIV在Position:absolute情况下的居中需要知道DIV的高和宽； 通过数学我们可以知道，可以首先将DIV的高/宽的定位设置：Left/Top设为50%；然后将Margin-Left/Top：-(宽/高 ÷ 2)即可。 例如： <div style="position: absolute; width: 380px;...
绝对定位的div,如何居中
www.hohode.com
08-20 3829
from http://www.aichengxu.com/article/CSS/650_6.html div绝对定位居中这样的效果在网页设计中经常碰到，这里记录下来和大家共同学习。 下面是一个div绝对定位居中的例子，父级是相对整个html文档的： html代码： ">div绝对定位居中 css代码： #wrap{     width:200px;
div绝对定位居中
weixin_30568591的博客
07-11 108
绝对定位absolute，left：50%，加上margin-left：-（宽度/2），可以实现绝对位置居中 .list{ width: 1200px; height: 300px; overflow: hidden; position: absolute; left: 50%; margin-left: -600px;}上面是早期使用的绝对定位实现水平居中，...
div absolute 居中
雨滴
01-04 548
很多情况下，我们需要在网页上弹出dialog，需要水平垂直居中。而且可以做到自动适应窗口变化 [b]对于页面绝对定位，垂直居中[/b] [code="java"] var h = $(this).height(); var oh = $(this).outerHeight(); var mt = (h + (oh - h)) / 2; $(this).css("marg...
div绝对定位 居中
09-11 651
div绝对定位居中这样的效果在web设计中经常碰到。 一个div绝对定位居中，他的父级是相对整个html文档的： html代码： div绝对定位居中 css代码： #wrap{     width:200px;     height:200px;     position:absolute;     top:50%;     left:50%;     margin-top:
CSS 将两个button按钮垂直+水平居中
01-20
在CSS布局设计中，将元素垂直和水平居中是一项常见的需求。在这个问题中，我们将讨论如何使用CSS将两个button按钮实现垂直和水平居中的方法，主要聚焦于一种使用`position: absolute`和`margin: auto`的技术。这种...
CSS中将Span标签设置为固定宽度的方法
12-13
在CSS（层叠样式表）中，`<span>` 是一个常见的内联...通过这种方式，`<span>` 会相对于其父元素 `li` 绝对定位，使其始终保持在右边，并且不会影响其他内联内容的布局。这种方法避免了使用 `float` 导致的换行问题。
position:absolute;的DIV 如何居中
z_l_ming的专栏
06-17 7445
外层DIV{position:realtive} 内层DIV{positon:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-150px;width:300px;height:200px;}<div class="father"> <div class="son"> </div> </div>.father{
div绝对居中的六种方法
weixin_40151813的博客
01-20 1389
在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。 方法一:绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） div{ background:red; position: abs...
绝对定位的DIV绝对居中显示
精灵小记
05-24 8703
绝对居中：即在客户端上任何分辨率下纵横方向均居中  紫色的正方形为绝对定位的divposition:absolute;  top: 50%;  left: 50%; 只能把div定位在以红色圈为起点的位置，加上margin:-100px 0px 0px -100后，便可以让其移动到以红点为中心的位置。; 样例代码： Nice and
DIV绝对定位的居中解决方案
铭记园园的专栏
04-08 437
css样式定义如下： body{ text-align:center;//body部分的text为居中，勿忘。 margin:0px;//边距为0px； } #mydiv{ position: relative;//一定是相对定位。 background-color:#FF9966;//文档背景色 width:900px;//宽度是文档宽度。 height:599px;//高度是文档高度。 } 下
绝对定位 容器里面的div水平居中
dashen_me的博客
02-11 1221
外层div样式 { position: absolute; top: 0; max-width: 1200px; width: 100%; left: 0; right: 0; margin: auto; } 如果不生效的话可以注意你的样式顺序看看和我的一样不。...
CSS 绝对定位 div 水平居中（两种）
前端技术
11-24 1970
html <div class="test-div"></div> css 1. 确定宽度 .test-div { display: inline-block; width: 100px; height: 100px; background: red; position:absolute; left: 50%; margin-left: -50px; } 宽度为 100px，使用 margin-left: -50p
DIV绝对居中(CSS)
weixin_30455661的博客
08-14 622
<styletype="text/css"><!--#hc{height:200px;width:400px;margin:-100px0px0px-200px;top:50%;left:50%;text-align:left;padding:0px;position:absolute;overflow:auto;}-->&l...
CSS之通过定位简单实现div绝对居中
超超玄著
07-19 7721
body{ margin:0px; width:100%; height:100%; } .box{ position:absolute; top:50%; left:50%; width:500px; height:200px; } .content{ position:relative; top:-50%; le
div元素实现上下左右水平居中
最新发布
05-25
可以使用 CSS 的 flex 布局来实现 div 元素在水平和垂直方向上的居中。具体实现方法如下： 1. 首先，给包含 div 元素的父元素添加以下样式： ```css .container { display: flex; justify-content: center; /* ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值