如何使用位置精确居中对齐父div中的子div与css？

Question

我需要使用css位置（相对和绝对）在父潜水中准确对准儿童潜水。请帮帮我

Answer 1

我尝试使用以下解决方案。

＆＃13;

＆＃13;

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

＆＃13;

<div class="parnt-div">
  <div class="chld-div">
       Child div
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

＆＃13;

＆＃13;

#centerLayer {
     position: absolute;
     width: 40%; 
     height: 30%;
     left: 50%;
     top: 50%; 
     margin-left: -20%;
     margin-top: -15%; 
     background: #fc0;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

2第二种方法：

＆＃13;

＆＃13;

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

3第三种方式：

＆＃13;

＆＃13;

#centerLayer {
     width: 400px; 
     background: #fc0; 
     padding: 10px; 
     text-align: left; 
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

4第四：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

Answer 4

＆＃34;旧方式＆＃34;：如果您需要IE8支持。

＆＃13;

＆＃13;

.parent {
  position: relative;
  width: 100%;
}
.child {
  position: absolute;
  left: 50%;
  margin-left: -40%; /* width/2 */
  width: 80%;
  background: yellow;
  padding: 1em;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

新方法：使用translate。此方法更易于使用，因为无论您为子元素提供的宽度如何，translateX(-50%)始终有效。 translate将元素的宽度作为其百分比值作为引用，因此无论元素的宽度如何，-50％将始终为一半。别忘了添加the necessary vendor prefixes。

＆＃13;

＆＃13;

.parent {
  position: relative;
  width: 100%;
}
.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  background: yellow;
  padding: 1em;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

我知道它没有使用position

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

＆＃13;

＆＃13;

.container {
     padding: 50px;
     background: yellow;
     text-align: center;
}
.container div {
     background: orange;
     padding: 10px 0 0;
     
}

＆＃13;

<div class="container">
    <div>I am a div</div>
<div>

＆＃13;

＆＃13;

＆＃13;

Answer 6

我认为它将完全适用于父母和孩子的中心。

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/

Answer 7

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