code

다른 div 내부의 div를 수직으로 중심 맞춤

starcafe 2023. 4. 8. 09:05
반응형

다른 div 내부의 div를 수직으로 중심 맞춤

나는 다른 div 안에 있는 div를 가운데에 두고 싶다.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

이것이 제가 현재 사용하고 있는 CSS입니다.

    #outerDiv {
        width: 500px;
        height: 500px;
        position: relative;
    }
    
    #innerDiv {
        width: 284px;
        height: 290px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -147px;
        margin-left: -144px;
    }

은 '보다', '', '다음에', '다음에', '다음에', '다음에', '다음에', '다음에', '다음에', '다음에', '다음에', '다음에', '다음에', '다음에', '다음에', '다음에'의 폭과 높이에 따라 달라집니다.#innerDiv '/어주세요', '/어주세요', '/어주세요'를 해야 합니다margin-top ★★★★★★★★★★★★★★★★★」margin-left★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★#innerDiv그기기 관관? ???

margin: auto할 수 .#innerDiv정렬은 요?지만만 수렬? ???? ????

dr;dr

, 중간작품은 가로줄로 맞추어야 .table-cell 、 「 」inline-block아이에게요.

은 IE6.IE6 에 7 에 this에 。
그런 사람들을 위해 가는 게 더 안전해당신이니까
하지만 당신이 CSS3와 HTML5로 질문에 태그를 달았기 때문에, 저는 당신이 현대적인 솔루션을 사용하는 것을 꺼려하지 않는다고 생각했습니다.

클래식한 솔루션(테이블 레이아웃)

이게 저의 원래 대답입니다.이 솔루션은 여전히 잘 작동하며 가장 광범위한 지원을 받는 솔루션입니다.테이블 레이아웃은 렌더링 성능에 영향을 미치므로 최신 솔루션 중 하나를 사용하는 것이 좋습니다.

여기 예가 있습니다.

테스트 대상:

  • FF3.5 이상
  • FF4+
  • Safari 5 이상
  • 크롬 11 이상
  • IE9+

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

최신 솔루션(변혁)

현재는 변환이 상당히 잘 지원되고 있기 때문에 이를 위한 더 쉬운 방법이 있습니다.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

데모

♥ 내가 좋아하는 최신 솔루션(플렉스박스)

플렉스박스를 점점 더 사용하기 시작했는데, 이제는 지원도 잘 되고 있습니다.이것이 단연코 가장 쉬운 방법입니다.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

데모

더 많은 예와 가능성:한 페이지에 있는 모든 방법을 비교합니다.

이 수평 및 수직 중심화를 실현하는 또 다른 방법은 다음과 같습니다.

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

(참조)

Transform Translate를 사용하는 방법도 있습니다.

는 Outer Div를 .position로로 합니다.relative ★★★★★★★★★★★★★★★★★」fixed, , 이너디브는 이너디브입니다.position로로 합니다.absolute,top ★★★★★★★★★★★★★★★★★」left로로 합니다.50% 해서 '아예'를 붙입니다.transform: translate(-50%, -50%).

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>

테스트 대상:

  • Opera 24.0 (최소 12.1)
  • Safari 5.1.7(-webkit-프리픽스가 있는 최소 4개)
  • Firefox 31.0(-moz-프리픽스가 있는 최소 3.6, 프리픽스가 없는 16부터)
  • Chrome 36(-webkit- 프리픽스가 있는 최소 11, 프리픽스가 없는 36부터)
  • IE 11, 10(-ms-프리픽스가 있는 최소9, 프리픽스가 없는10부터)
  • 다른 브라우저, 사용할 수 있나요?

CSS를 3행만 사용하여 모든 것을 수직 정렬

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

가장 심플한

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

wastiprefix에 따르면 이 접두사만 필요합니다.

요소의 부모 또는 수직 크기를 확장하는 콘텐츠가 있는 경우 .parent-of-element의 '높이' 속성의 값으로 %를 사용할 수도 있습니다.

쓰기 어렵고 유지보수가 어려운 CSS에 얽매이는 대신(또한 브라우저 간 세심한 검증 필요)CSS를 포기하고 놀라울 정도로 단순한 HTML 1.0을 사용하는 것이 훨씬 낫다고 생각합니다.

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

이것은 오리지널 포스터가 원했던 모든 것을 달성하고 견고하고 유지보수가 가능합니다.

아래 css style을 추가하는 것만으로 할 수 있습니다.이것은 대부분의 브라우저에서 지원됩니다.브라우저 지원에 대해서는 여기를 참조하십시오.행운을 빌어요.문의사항이 있으시면 코멘트 부탁드립니다.

#outerDiv {
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

#innerDiv {
        background:cyan;
        width: 284px;
        height: 290px;
    }
<div id="outerDiv">
    <div id="innerDiv">
        Inner Div
    </div>
</div>

저는 개인적으로 숨겨진 의사 요소를 사용하여 외부 컨테이너의 전체 높이를 확장한 후 다른 컨텐츠와 수직으로 정렬하는 방법을 선호합니다.Chris Coyier가 기술에 대한 좋은 기사를 가지고 있다.http://css-tricks.com/centering-in-the-unknown/ 이 기능의 큰 장점은 확장성입니다.콘텐츠의 높이를 알 필요도 없고, 콘텐츠의 증가/수축에 대해 걱정할 필요도 없습니다.이 솔루션은 :) 확장 가능합니다.

여기 필요한 모든 CSS와 작업 예가 있습니다.http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}

만약 당신이 위의 놀라운 답변을 읽고도 이해하지 못했다면.

다음은 이를 달성하는 방법에 대한 두 가지 간단한 예입니다.

디스플레이 사용방법: 테이블 셀

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

플렉스 박스 사용(디스플레이: 플렉스)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

주의: 위의 구현을 사용하기 전에 브라우저의 디스플레이: 테이블 셀과 플렉스의 호환성을 확인하십시오.

다른 div 내부의 div 항목 수직 중심 맞추기

는 그냥 테음음음음음음음음 the the the the the the the the the the 로 세팅해 주세요.display:table그리고 속사정을 알려드립니다.display:table-cell 설정해 주세요.height컨테이너에 올려놓고, 세팅합니다.vertical-align:middle을 가지고 있습니다.이것은 IE9 시절까지 폭넓은 호환성을 가지고 있습니다.

수직 정렬은 상위 컨테이너의 높이에 따라 달라집니다.

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>

이 경우height는 설정되어 있지 않습니다(자동).inner div에 몇 가지 패딩(위아래)을 주어 수직으로 중앙에 배치할 수 있습니다.

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

다른 div 내부의 div를 수직으로 중심 맞춤

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>

저는 다음 솔루션을 1년 이상 사용하고 있으며, IE 7, 8에서도 사용할 수 있습니다.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

난 이거면 돼.외부 div의 폭과 높이를 정의할 수 있습니다.

코드는 다음과 같습니다.

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>

Fidle Link < http://jsfiddle.net/dGHFV/2515/ >

이거 드셔보세요

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }

높이 값을 지정하지 않은 innerdiv의 경우 수직 중심에 놓기 위한 순수한 css 솔루션이 없습니다.javascript 솔루션은 innerdiv의 오프셋을 얻을 수 있습니다.높이를 계산한 다음 style.marginTop을 계산합니다.

간단한 javascript(jQuery) 블록으로 이를 수행할 수 있습니다.

CSS:

#outerDiv{
    height:100%;
}

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

내부 요소를 다음과 같이 정렬합니다.

top: 0;
bottom: 0;
margin: auto;
display: table;

그리고 물론:

position: absolute;

플렉스를 사용하여 CSS에서 div를 수직 및 수평으로 중앙에 배치할 수 있습니다.

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

두 번째는 다음과 같습니다.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

그 결과 HTML:

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>

여기에 이미지 설명 입력 100% 동작 

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

CSS3를 사용하여 이 문제를 해결할 수 있는 다른 크로스 브라우저 방법을 보여드리고 싶습니다.calc().

를 사용할 수 있습니다.calc()제어하는 기능margin-top부모 div에 대해 절대적인 위치에 있을 때 자식 div의 특성입니다.

주요 장점:calc()부모 요소의 높이는 언제든지 변경할 수 있으며 자식 div는 항상 가운데에 정렬됩니다.

그margin-top계산은 동적으로 이루어집니다(스크립트가 아닌 css에 의해 이루어지며 이는 매우 큰 이점입니다).

라이브 데모 보기

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will always             
           center vertically the child inside the parent */
        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      </div>
    </div>
  </body>
</html>

출력:

여기에 이미지 설명 입력

이것은 IE6으로 거슬러 올라갈 수 있습니다.

<!DOCTYPE html>IE6에서도 필요합니다.[ IE6 디폴트 strict 모드도 강제합니다]

(물론 박스 색상은 데모용입니다.)

#outer{
        width: 180px;
        height: 180px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: center;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        display: inline-block;
        padding: .3em;
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,110,255,.7)}
<DIV id=outer>
<div id=center>
</div><!--Don't break this line!--><div id=inner>
The inner DIV
</div>
</DIV>

부모 요소에서는 텍스트 align-center, 자녀 요소에서는 인라인 블록을 표시합니다.이것은 모든 것의 중심을 잡습니다.'블록 플로트'라고 부르는 것 같아요.

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

이것 또한 플로트의 좋은 대체품입니다, 행운을 빕니다!

수직과 수평의 중심을 맞추려면:

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}

그 질문은 1년 전에 만들어졌다는 걸 알아요어쨌든 CSS3 덕분에 div in div를 쉽게 수직으로 정렬할 수 있습니다(http://jsfiddle.net/mcSfe/98/) 참조).

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
}

언급URL : https://stackoverflow.com/questions/6490252/vertically-centering-a-div-inside-another-div

반응형

'code' 카테고리의 다른 글

SQL Server 트랜잭션 로그를 지우려면 어떻게 해야 합니까?  (0) 2023.04.08
빌드 후 이벤트 실행 PowerShell  (0) 2023.04.08
정적 HTML 페이지에 favicon 추가  (0) 2023.04.08
CSS를 사용하여 요소 배경의 불투명도를 낮추려면 어떻게 해야 합니까?  (0) 2023.04.08
사용자가 DIV 바깥쪽을 클릭할 때 jQuery를 사용하여 DIV 숨기기  (0) 2023.04.08

'code'의 다른글

  • 현재글다른 div 내부의 div를 수직으로 중심 맞춤

관련글

댓글

티스토리툴바