-2

我需要使用 css 位置（例如（相对和绝对））将子潜水在父潜水内精确居中对齐。请帮我

4

7 回答 7

3

我尝试使用以下解决方案。 在此处输入图像描述

.parnt-div{
	width:500px;
	height:500px;
	background-color:rgba(197,6,10,1.00);
	position:relative;}
.chld-div{
	position:absolute;
	width:200px;
	height:200px;
	background-color:rgba(122,232,23,1.00);
	vertical-align: middle;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
<div class="parnt-div">
  <div class="chld-div">
       Child div
  </div>
</div>

于 2015-10-17T07:39:17.873 回答
2

有很多方法可以使元素居中。

1 它是其中之一（请打开整页）：

#centerLayer {
     position: absolute;
     width: 40%; 
     height: 30%;
     left: 50%;
     top: 50%; 
     margin-left: -20%;
     margin-top: -15%; 
     background: #fc0;
    }
<div>
    <div id="centerLayer">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
      euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
</div>

2 第二种方法：

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
<div >
  <div class="Absolute-Center">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis gravida enim, eu dignissim mauris elementum in. Sed laoreet enim a turpis lacinia condimentum. Nunc aliquam arcu vitae tortor aliquam, eget luctus metus elementum. In est quam,
      pretium id mi in, consequat posuere velit. Quisque sed nulla sed nisl malesuada facilisis. Mauris congue fermentum semper. Sed lobortis pretium dignissim. Aliquam lacinia, tellus in convallis convallis, leo tellus malesuada justo, et tincidunt felis
      ipsum egestas ex. Sed aliquet, eros vitae eleifend aliquam, diam nulla dictum magna, sed pharetra dolor risus ac lectus. Proin augue lectus, eleifend nec aliquam sed, molestie pulvinar massa. Aenean vel quam in purus dictum vulputate. Curabitur
      est tortor, convallis sit amet lacus sit amet, consequat maximus justo. Sed elementum, dolor non rhoncus vulputate, est eros pretium nulla, id egestas est risus vitae ipsum. Mauris tempor eget nulla tristique vulputate.
    </p>
  </div>
</div>

3 第三种方式： 

#centerLayer {
     width: 400px; 
     background: #fc0; 
     padding: 10px; 
     text-align: left; 
    }
<div align="center">
    <div id="centerLayer">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
     nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
    </div>
  </div>

4 第四：

   #centerLayer {
    margin-left: 30%; /* Left marging */
    width: calc(40% - 2 * 10px - 2 * 6px); /* Width of block  */
    background: #fc0; /* Background color */
    padding: 10px; /* Padding around text */
      border: 6px double white;
   }
<div >

  <div id="centerLayer">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy
   nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  </div>
  
</div>

于 2015-10-17T07:05:40.840 回答
0

根据 CSS3，您可以使用 Flex 框将 div 对齐到任何位置和顺序以及 div 之间的间距等。

于 2016-12-02T12:29:00.200 回答
0

HTML

<div id="parent">
    <div id="child" class="block center">a block to align center </div>
</div>
<br>

CSS

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
    position: relative;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
    position: absolute;
}
于 2015-10-17T07:27:43.050 回答
0

“老办法”：如果您需要 IE8 支持。

.parent {
  position: relative;
  width: 100%;
}
.child {
  position: absolute;
  left: 50%;
  margin-left: -40%; /* width/2 */
  width: 80%;
  background: yellow;
  padding: 1em;
}
<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis gravida enim, eu dignissim mauris elementum in. Sed laoreet enim a turpis lacinia condimentum. Nunc aliquam arcu vitae tortor aliquam, eget luctus metus elementum. In est quam,
      pretium id mi in, consequat posuere velit. Quisque sed nulla sed nisl malesuada facilisis. Mauris congue fermentum semper. Sed lobortis pretium dignissim. Aliquam lacinia, tellus in convallis convallis, leo tellus malesuada justo, et tincidunt felis
      ipsum egestas ex. Sed aliquet, eros vitae eleifend aliquam, diam nulla dictum magna, sed pharetra dolor risus ac lectus. Proin augue lectus, eleifend nec aliquam sed, molestie pulvinar massa. Aenean vel quam in purus dictum vulputate. Curabitur
      est tortor, convallis sit amet lacus sit amet, consequat maximus justo. Sed elementum, dolor non rhoncus vulputate, est eros pretium nulla, id egestas est risus vitae ipsum. Mauris tempor eget nulla tristique vulputate.
    </p>
  </div>
</div>

新方法：使用translate. 此方法更易于使用，因为无论您为子元素指定什么宽度，translateX(-50%)都将始终有效。translate将元素的宽度作为其百分比值作为参考，因此无论元素的宽度如何，-50% 始终是一半。不要忘记添加必要的供应商前缀。

.parent {
  position: relative;
  width: 100%;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  background: yellow;
  padding: 1em;
}
<div class="parent">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis gravida enim, eu dignissim mauris elementum in. Sed laoreet enim a turpis lacinia condimentum. Nunc aliquam arcu vitae tortor aliquam, eget luctus metus elementum. In est quam,
      pretium id mi in, consequat posuere velit. Quisque sed nulla sed nisl malesuada facilisis. Mauris congue fermentum semper. Sed lobortis pretium dignissim. Aliquam lacinia, tellus in convallis convallis, leo tellus malesuada justo, et tincidunt felis
      ipsum egestas ex. Sed aliquet, eros vitae eleifend aliquam, diam nulla dictum magna, sed pharetra dolor risus ac lectus. Proin augue lectus, eleifend nec aliquam sed, molestie pulvinar massa. Aenean vel quam in purus dictum vulputate. Curabitur
      est tortor, convallis sit amet lacus sit amet, consequat maximus justo. Sed elementum, dolor non rhoncus vulputate, est eros pretium nulla, id egestas est risus vitae ipsum. Mauris tempor eget nulla tristique vulputate.
    </p>
  </div>
</div>

于 2015-10-17T07:33:26.090 回答
0

我知道它没有利用position

但是您尝试过填充吗？由于您不知道父母的身高，这可能是最简单的方法

.container {
     padding: 50px;
     background: yellow;
     text-align: center;
}
.container div {
     background: orange;
     padding: 10px 0 0;
     
}
<div class="container">
    <div>I am a div</div>
<div>

于 2015-10-17T08:31:02.980 回答
0

我认为它将在父母和孩子 div 的确切中心工作。

HTML:
<div class="parent">
<div class="child">
</div>
</div>

CSS:
.parent{
margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:1px solid red;
width:200px;
height:200px;
}

.child{
margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:1px solid black;
width:100px;
height:100px;  
}

https://jsfiddle.net/manigopal89/x263ongn/

于 2016-10-26T08:14:15.280 回答