vertical - html center




如何以“位置:绝对”元素为中心 (16)

我在将属性position设置为absolute的元素居中时遇到问题。 有谁知道为什么图像不居中？ 

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

我不确定你想要完成什么，但在这种情况下只需添加width: 100%; 到你的ul#slideshow li将会做到这一点。

说明

img标签是内嵌块元素。 这意味着它们像文本一样内联，但也具有像块元素一样的宽度和高度。 在你的CSS有两个text-align: center; 规则应用于<body>和#slideshowWrapper （这是多余的btw），这使得所有内联和内联块子元素都集中在最近的块元素中，在你的代码中这些元素是li标签。 所有块元素的width: 100%如果它们是静态流量（ position: static; ），这是默认值。 问题是，当你告诉li标签position: absolute; ，你把它们从正常的静态流程中拿出来，这会导致它们缩小尺寸以适应它们的内容，换句话说，它们会“失去”它们的width: 100%属性。

Div垂直和水平对齐中心 

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

注意：元素应该有宽度和高度来设置

一个简单的CSS技巧，只需添加： 

width: 100%;
text-align: center;

这适用于图像和文字。

中心一个位置：绝对属性，你需要设置左：50％和余量：div的宽度的-50％。 

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

对于垂直中心绝对，你需要做同样的事情芽，而不是只留下顶部。 （注意：html和body必须有最小高度100％;） 

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

并可以结合使用 

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>

似乎正在发生的是有两种解决方案; 以边距为中心并使用位置居中。 两者都可以正常工作，但是如果你想绝对定位一个相对于这个居中元素的元素，你需要使用绝对位置方法，因为第二个元素的绝对位置默认为第一个定位的父元素。 像这样： 

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

在阅读本文之前，使用margin：0 auto技术，在我的内容左侧构建一个菜单，我必须在右侧构建一个宽度相同的列来平衡它。 不漂亮。 谢谢！

你可以尝试这种方式： 

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }
<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>

使用margin-left: x%; 其中x是元素宽度的一半。

在不知道定位1元素的width / height下，仍然可以如下对齐它：

在这里举例 

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

值得注意的是，IE9及以上版本支持 CSS转换 。 （供应商前缀为简洁起见省略）

说明

添加50%的顶部/左侧将元素的顶部/左侧边缘边缘移动到父项的中间，而使用-50% （负）值的translate()函数将元素移动其大小的一半。 因此元素将被放置在中间。

这是因为top / left属性的百分比值是相对于父元素的高度/宽度（这是创建一个包含块）。

虽然translate() transform函数的百分比值与元素本身的宽度/高度有关（实际上它指的是边界框的大小） 。

对于单向对齐，请使用translateX(-50%)或translateY(-50%) 。

1.具有非static position的元素。 即relative ， absolute ， fixed值。

如果你想中心一个绝对元素 

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

如果你想让容器从左到右居中，而不是从上到下 

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

如果您希望容器从上到下居中，无论从左到右 

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

截至2015年12月15日更新

那么在几个月前我又学到了另一个新技巧。 假设你有一个相对的父元素。

这里是你的绝对元素。 

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

有了这个，我认为这比我的旧解决方案更好。 由于您不必指定宽度和高度。 这个它适应元素本身的内容。

将absolute定位的东西置于CSS中相当复杂。 

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

将margin-left更改为（负）您试图居中的元素宽度的一半。

相对对象内的绝对对象是相对于其父对象的，这里的问题是你需要一个容器#slideshowWrapper的静态宽度，其余的解决方案就像其他用户所说的 

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

绝对位置将其从流中取出，并将其置于0x0处的父级（最后一个块元素具有绝对位置或相对位置）。

我不确定你到底想要达到什么样的目标，最好是将li设置为一个position:relative ，这将会使他们居中。 鉴于您当前的CSS

查看http://jsfiddle.net/rtgibbons/ejRTU/来玩它

这里是中心元素的简单和最佳解决方案，“position：absolute” 

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }
 
 
<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

请参阅演示： http://jsfiddle.net/MohammadDayeh/HrZLC/ ： http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center ; 使用position: absolute添加left: 0; right: 0;时为position: absolute元素left: 0; right: 0; left: 0; right: 0; 

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;



vertical   horizontally   div   css居中   css垂直居中   content   align   html   css   css-position   centering  


centering