相关疑难解决方法(0)

我需要在窗口的中心放置一个div(with position:absolute;)元素.但我这样做有问题,因为宽度未知.

我试过这个.但需要根据宽度的响应进行调整.

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

有任何想法吗？

我想创建一个div可以随着窗口宽度的变化而改变宽度/高度的东西.

是否有任何CSS3规则允许高度根据宽度改变,同时保持其宽高比？

我知道我可以通过JavaScript实现这一点,但我更喜欢只使用CSS.

我试图在粉红色的容器中间获得蓝色容器,但是vertical-align: middle;在这种情况下似乎不能完成工作.

<div style="display: block; position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
        <div style="background-color: lightblue;">test</div>
    </div>
</div>

结果:

期望:

请建议我如何实现这一目标.

的jsfiddle

我有一个 div，里面有一个按钮：

我让按钮位置为absolute，其样式代码为：

  .buy-btn {
    text-align: center;
    position: absolute;
    bottom: 10px;

  }

我怎样才能将它对齐到中心？我试过 add margin: 0 auto;，但它不起作用。

我想在页面的中心显示一个div,而不必为元素定义一个设置的高度,以便高度动态地适合页面的内容.这可能吗？我愿意使用JS/jQuery解决方案,只要它们具有优雅的回退,但我更喜欢纯CSS解决方案.

这是我当前的代码,它将以div为中心,但我必须包含一个高度.

HTML

    <div class="card">Lorem ipsum dolor sit amet, minim molestie argumentum est at, 
pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit 
at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has. Ius ne harum mundi 
clita, eu pro tation audiam.
    </div>

CSS

.card {
    background-color: #1d1d1d; /* IE fallback */
    background-color: rgba(29, 29, 29, 0.95);
    color: #fff;
    display: inline-block;
    margin: auto;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: …

我无法将元素position: absolute内部的内部元素居中position: relative（https://jsfiddle.net/qL0c8cau/）：

html,body,div {margin:0;padding:0;}
.one {
  position: relative;
  margin: 50px auto;
  width: 200px;
  height: 100px;
  background: #900;
}
.two {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  background: #0f0;
  opacity: 0.3;
  height: 160px;
  width: 400px;
}

<div class="one">
  
  <div class="two"></div>
  
</div>

我看不出它有什么问题。我将所有内容设置正确，但由于某种原因它没有水平对齐。

我在这里做错了什么？

我相信这对专业人士来说是“简单的”：

我不知道如何将叠加层居中（水平和垂直）到其父级。有关详细信息，请参阅 jsfiddle 链接。

提前感谢您的时间...

磅

<div class="grandparent">
    <div class="parent">
        <!-- 1st row */ -->
        <div class="child">1-1</div>
        <div class="child">1-2</div>
        <div class="child">1-3</div>

        <!-- 2nd row */ -->
        <div class="child">2-1</div>
        <div class="child">2-2</div>
        <div class="child">2-3</div>

        <!-- 3rd row */ -->
        <div class="child">3-1</div>
        <div class="child">3-2</div>
        <div class="child">3-3</div>


        <div class="overlay">
            Overlaysdfds 
            line2sdf sdfdsf sdfsdf sfdsdf
            <P />line 3
         </div> 

    </div>


</div>   

和 CSS：

<style>
.grandparent {
    posttion: relative;
    height: 100%;
    width:100%;
    max-width:600px;

    margin: 0 auto;
    text-align:center;
    border: 1px solid green;
    overflow: hidden;
} …

是否可以选择找到实际屏幕位置的中心位置（顶部和左侧）？

我的主要目标是在屏幕中央显示 div，无论我在哪里滚动或点击

这是我的代码：

<div class="container-fluid">
        <div class="carousel slide" data-ride = "carousel" style="position: relative">
            <div class="carousel-inner" role="listbox">
                 <div class="item active">
                 <img src="images/slide-1.jpg">
                 </div>
                 <div class="item">
                 <img src="images/slide-2.jpg">
                 </div>
                 <div class="item">
                 <img src="images/slide-3.jpg">
                 </div>
            </div>
        </div>
        <div class="container" style="background-color:#fff; top: 50px; margin: 0 auto;">
            <h1>Hello</h1>
        </div>
</div>

这是输出：

问题是“容器”div 没有居中。我知道“位置：绝对”是主要的麻烦制造者，但是如何在没有“位置：绝对”的情况下定位 div？解决办法是什么？

有没有办法将absolute已定位的元素定位到其已定位的父元素的中心relative？

我在想是否可以以某种方式计算父级的宽度，并据此将子级居中？但不确定从哪里开始，是使用 JavaScript 还是 CSS。

这是可供参考的代码笔

我试图将一个绝对按钮放在一个 div（在底部）中，但它似乎不起作用..这是我现在正在做的事情：

.mc-item {
  background: #F0F0F0;
  border: 1px solid #DDD;
  height: 140px;
  padding: 20px;
}

.mc-item a {
  position: absolute;
  bottom: -19px;
  left: 50%;
}

.mc-item p {
  text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-md-4 col-sm-12">
  <div class="mc-item">
    <p>Changez votre adresse email ou votre mot de passe.</p>
    <a asp-controller="MyAccount" asp-action="Settings" class="btn btn-primary">Paramètres</a>
  </div>
</div>

这给出了以下结果：

我想要的是中间居中的按钮。是否left: 50%考虑整体.col div？我尝试将buttona包裹起来，div并且div的宽度变为 380，这与.col div(div与<p>) 相同。