( 및 ) (으 ) 로 div설정되어 있고 내부에 텍스트가 있습니다.display:block90px heightwidth

텍스트를 세로 및 가로로 가운데에 정렬해야합니다.

나는 시도 text-align:center했지만 수평 부분을하지 않기 때문에 시도 vertical-align:middle했지만 작동하지 않았다.

어떤 아이디어?

한 줄의 텍스트 및 / 또는 이미지이면 쉽게 수행 할 수 있습니다. 그냥 사용하십시오 :

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

그게 다야. 여러 줄이 될 수 있다면 다소 복잡합니다. 그러나 http://pmob.co.uk/ 에 솔루션이 있습니다 . "수직 정렬"을 찾으십시오.

그것들은 해킹이나 복잡한 div를 추가하는 경향이 있기 때문에 ... 나는 보통 단일 셀이있는 테이블을 사용하여 가능한 한 간단하게 만듭니다.

2020 년 업데이트 :

Internet Explorer 10과 같은 이전 브라우저에서 작동하지 않으면 flexbox를 사용할 수 있습니다. 그것은되어 널리 현재의 모든 주요 브라우저에서 지원 . 기본적으로 컨테이너는 기본 축과 횡축을 따라 중앙에 배치되는 플렉스 컨테이너로 지정해야합니다.

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

자식에 고정 너비를 지정하려면 "플렉스 항목"이라고합니다.

#content {
  flex: 0 0 120px;
}

예 : http://jsfiddle.net/2woqsef1/1/

내용을 축소 랩핑하는 것이 훨씬 간단합니다. flex: ...플렉스 항목에서 줄을 제거하면 자동으로 줄 바꿈됩니다.

예 : http://jsfiddle.net/2woqsef1/2/

위의 예는 MS Edge 및 Internet Explorer 11을 포함한 주요 브라우저에서 테스트되었습니다.

사용자 정의해야 할 경우 기술 노트 : flex 항목 내에서이 flex 항목은 flex 컨테이너 자체가 아니기 때문에 이전의 비 flexbox 방식의 CSS 방식이 예상대로 작동합니다. 그러나 현재 플렉스 컨테이너에 추가 플렉스 항목을 추가하면 두 개의 플렉스 항목이 가로로 배치됩니다. 수직으로 배치하려면 flex-direction: column;플렉스 컨테이너에을 추가하십시오 . 이것이 플렉스 컨테이너와 직계 자식 요소 사이에서 작동하는 방식 입니다.

센터링을 수행하는 다른 방법이 있습니다 : center플렉스 컨테이너의 주축과 횡축에 대한 분포를 지정하지 않고, 대신 margin: auto네 방향으로 모든 여분의 공간을 차지하도록 플렉스 아이템을 지정 하고, 균등하게 분포 된 마진 플렉스 아이템을 모든 방향으로 중앙에 배치합니다. 여러 플렉스 아이템이있는 경우를 제외하고 작동합니다. 또한이 기술은 MS Edge에서는 작동하지만 Internet Explorer 11에서는 작동하지 않습니다.

2016/2017 업데이트 :

보다 일반적으로 수행 할 수 있으며 transformInternet Explorer 10 및 Internet Explorer 11과 같은 이전 브라우저에서도 잘 작동합니다. 여러 줄의 텍스트를 지원할 수 있습니다.

position: relative;
top: 50%;
transform: translateY(-50%);

예 : https://jsfiddle.net/wb8u02kL/1/

폭을 줄이려면 :

위의 솔루션은 내용 영역에 고정 너비를 사용했습니다. 수축 포장 폭을 사용하려면

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

예 : https://jsfiddle.net/wb8u02kL/2/

Internet Explorer 10에 대한 지원이 필요한 경우 flexbox가 작동하지 않고 위의 line-height방법 과 방법이 작동합니다. 그렇지 않으면 flexbox가 작업을 수행합니다.

2014 년 현재 일반적인 기술 :

• 접근법 1- transform translateX/ translateY:

  여기 예 / 전체 화면 예

  에서 지원되는 브라우저 (대부분), 당신은 사용할 수 있습니다 top: 50%/ left: 50%와 함께 translateX(-50%) translateY(-50%)수평 요소를 중심 / 동적 수직으로.

  .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
  }
  

• 접근법 2-Flexbox 방법 :

  여기 예 / 전체 화면 예

  에서 지원되는 브라우저 의 설정 display대상에 요소의 flex사용을 align-items: center수직 중심과 justify-content: center수평 중심에 대해. 추가 브라우저 지원을 위해 공급 업체 접두사를 추가하는 것을 잊지 마십시오 ( 예 참조 ).

  html, body, .container {
      height: 100%;
  }
  .container {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

• 접근법 3- table-cell/ vertical-align: middle:

  여기 예 / 전체 화면 예

  경우에 따라 html/ body요소의 높이가로 설정되어 있는지 확인해야합니다 100%.

  수직 정렬의 경우 부모 요소의 width/ height를 설정 100%하고 추가하십시오 display: table. 그런 다음 자식 요소를 들어, 변경 display에 table-cell추가합니다 vertical-align: middle.

  가로 text-align: center로 가운데를 맞추려면 텍스트와 다른 inline자식 요소 를 가운데에 추가 할 수 있습니다 . 또는 margin: 0 auto요소가 block수평 이라고 가정하여 사용할 수 있습니다 .

  html, body {
      height: 100%;
  }
  .parent {
      width: 100%;
      height: 100%;
      display: table;
      text-align: center;
  }
  .parent > .child {
      display: table-cell;
      vertical-align: middle;
  }
  

• 접근법 4- 50%변위를 통해 상단에서 절대 위치 :

  여기 예 / 전체 화면 예

  이 방법에서는 텍스트의 높이가 알려진 것으로 가정합니다 18px. 50%부모 요소를 기준으로 요소 를 맨 위에서 절대적으로 배치하십시오 . margin-top알려진 경우 높이의 절반 인 음수 값을 사용하십시오 ( 이 경우-) -9px.

  html, body, .container {
      height: 100%;
  }
  .container {
      position: relative;
      text-align: center;
  }
  .container > p {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
  }
  

• 접근법 5- line-height방법 (최소 유연성 – 제안되지 않음) :

  여기 예

  경우에 따라 상위 요소의 높이가 고정됩니다. 수직 센터링의 line-height경우 자식 요소의 값을 부모 요소의 고정 높이와 동일하게 설정하면 됩니다.

  -이 솔루션은 어떤 경우에 작동하지만, 그것의 가치는 여러 줄의 텍스트가있는 경우는 작동하지 않습니다 지적 과 같습니다 .

  .parent {
      height: 200px;
      width: 400px;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }
  

방법 4와 5는 가장 신뢰할 수 없습니다. 처음 3 개 중 하나와 함께 가십시오.

flexbox / CSS 사용 :

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS :

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

빠른 팁 에서 가져온 것 : 요소를 수직 및 수평으로 가운데 정렬하는 가장 간단한 방법

display: table-cell;해당 div의 CSS 내용에 줄 을 추가하십시오 .

테이블 셀만을 지원 vertical-align: middle;하지만 div에 [table-cell] 정의를 제공 할 수 있습니다.

실제 예는 다음과 같습니다. http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

항상 컨테이너에 다음 CSS를 사용하여 내용을 가로 및 세로로 가운데에 맞 춥니 다.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

https://jsfiddle.net/yp1gusn7/ 에서 실제 작업을 확인하십시오.

이를 위해 매우 쉬운 코드를 시도 할 수 있습니다.

  display: flex;
  align-items: center;
  justify-content: center;

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

코드 펜 링크 : http://codepen.io/santoshkhalse/pen/xRmZwr

이 CSS 클래스를 대상 <div>에 제공하십시오.

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

당신이 사용할 수있는 flex상기 속성을 부모 div 와 추가 margin:auto자녀 항목에 속성을 :

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

당신은 flex여기에 더 많은 옵션을 볼 수 있습니다 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

접근법 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

접근법 2

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

접근법 3

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

이것은 나를 위해 작동합니다 (확인!) :

HTML :

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS :

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

50 % 이외의 다른 값을 선택할 수 있습니다. 예를 들어 25 %는 부모의 25 %를 중심으로합니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

다음 방법을 시도 할 수 있습니다.

1. 한 단어 나 한 줄의 문장이 있다면 다음 코드를 사용하여 트릭을 수행 할 수 있습니다.

   div 태그 안에 텍스트를 넣고 ID를 지정하십시오. 해당 ID에 대해 다음 특성을 정의하십시오.

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   참고 : 선 높이 속성은 눈금 높이와 동일해야합니다.

   영상

   그러나 내용이 한 단어 이상이거나 한 줄 이상이면 작동하지 않습니다. 또한 나누기의 크기를 px 또는 %로 지정할 수없는 경우가 있습니다 (나눗셈이 실제로 작고 내용이 정확히 가운데에있을 때).

2. 이 문제를 해결하기 위해 다음과 같은 속성 조합을 시도해 볼 수 있습니다.

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   영상

   이 3 줄의 코드는 내용을 분할의 중간에 정확하게 설정합니다 (디스플레이의 크기에 관계없이). "정렬-항목 : 센터는" 수직 중심에 도움 동안 "정당화 - 내용 : 센터" 가 수평으로 중심을 다할 것입니다.

   참고 : Flex는 모든 브라우저에서 작동하지 않습니다. 추가 브라우저 지원을 위해 적절한 공급 업체 접두사를 추가하십시오.

그리드

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

수직 정렬을 위해 선 높이 조정

line-height: 90px;

이것이 정답이어야합니다. 가장 깨끗하고 간단한 :

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

스타일 적용 :

position: absolute;
top: 50%;
left: 0;
right: 0;

텍스트는 길이에 관계없이 중앙에 위치합니다.

이것은 나를 위해 일했다 :

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

나에게 이것은 가장 좋은 해결책이었다.

HTML :

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS :

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

나를 위해 정말 간단한 코드! 한 줄만 사용하면 텍스트가 가로 가운데에 배치됩니다.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

결과는 다음과 같습니다.

쉬운 해결책을 찾고있는 개발자들의 시간을 절약하기 위해 노력한다면이 답변에 투표하십시오. 감사! :)

다음 예제를 시도하십시오. 각 카테고리에 대한 예제를 추가했습니다 : 수평 및 수직

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>