div 내에서 버튼을 중앙에 배치하는 방법

div 내에서 버튼을 중앙에 배치하는 방법

---

너비가 100 % 인 div가 있습니다.

버튼을 가운데에 배치하고 싶습니다. 어떻게해야합니까?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

---

업데이트 된 답변

적극적인 답변임을 알았 기 때문에 업데이트했지만 Flexbox가 올바른 접근법입니다.

라이브 데모

수직 및 수평 정렬.

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

가로 만 (기본 플렉스 축이 가로 인 경우 기본값)

#wrapper {
  display: flex;
  justify-content: center;
}

고정 폭을 사용하고 flexbox를 사용하지 않는 원본 답변

원래 포스터가 버튼의 고정 너비 및 높이에 대해 수직 및 중앙 정렬을 쉽게 원한다면 다음을 시도하십시오.

라이브 데모

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

수평 정렬의 경우

button{
    margin: 0 auto;
}

또는

div{
    text-align:center;
}

---

당신은 단지 만들 수 있습니다 :

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

또는 대신 다음과 같이 할 수 있습니다.

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

첫 번째는 div 내부의 모든 것을 가운데 정렬합니다. 다른 하나는 버튼 만 가운데 정렬합니다.

---

et voila :

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
}

업데이트 : OP가 수평 및 수직 중심을 찾고 있다면 이 대답 은 고정 너비 / 높이 요소에 대해 수행합니다.

---

여백 : 0 자동; 수평 중심에 대해서만 정답입니다. jquery를 사용하여 이와 같은 방식으로 작동하는 두 가지 방법을 가운데에 맞추려면 다음을 수행하십시오.

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

---

업데이트 ... 5 년 후 , 부모 DIV 요소에 flexbox를 사용하여 버튼을 수평 및 수직으로 쉽게 중앙에 배치 할 수 있습니다.

최상의 지원을 위해 모든 브라우저 접두사 포함

div {
  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 ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

#container div {
  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;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>

---

제한된 세부 사항을 제공하면 가장 간단한 상황을 가정하고 사용할 수 있다고 말합니다 text-align: center.

http://jsfiddle.net/pMxty/

---

flexbox 사용

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

그런 다음 버튼에 수업을 추가하십시오.

<button class="Center">Demo</button> 

---

당신은 여기에 간단하게 가져 가야합니다.

먼저 텍스트 또는 버튼의 초기 위치가 있습니다.

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

By adding this css code line to the h2 tag or to the div tag that holds the button tag

style:" text-align:center; "

Finaly The result code will be :

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

---

Came across this and thought I'd leave the solution I used as well, which utilizes line-height and text-align: center to do both vertical and horizontal centering:

Click here for working JSFiddle

---

To center a <button type = "button"> both vertically and horizontally within a <div> which width is computed dynamically like in your case, this is what to do:

1. Set text-align: center; to the wrapping <div>: this will center the button whenever you resize the <div> (or rather the window)

2. For the vertical alignment, you will need to set margin: valuepx; for the button. This is the rule on how to calculate valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

Here is a JS Bin demo.

---

Super simple answer that will apply to most cases is to just make set the margin to 0 auto and set the display to block. You can see how I centered my button in my demo on CodePen

---

Easiest thing is input it as a "div" give it a "margin:0 auto " but if you want it to be centered u need to give it a width

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

---

Responsive CSS option to center a button vertically and horizontally without being concerned with parent element size (using data attribute hooks for clarity and separation concerns):

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/

---

Responsive way to center your button in a div:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

---

Supposing div is #div and button is #button:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

Then nest the button into div as usual.

참고URL : https://stackoverflow.com/questions/7560832/how-to-center-a-button-within-a-div