-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 に答える
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

CSS3 に従って、フレックス ボックスを使用して、div を任意の位置と順序、および div 間の間隔などに揃えることができます。

于 2016-12-02T12:29:00.200 に答える
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 に答える