Làm thế nào để tập trung vào một nút trong div?

Tôi có một div đó là chiều rộng là 100%.

Tôi muốn tập trung vào một nút trong đó, làm thế nào tôi có thể làm điều này?

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

Cập nhật câu trả lời

Cập nhật vì tôi nhận thấy đó là một câu trả lời tích cực, tuy nhiên Flexbox sẽ là cách tiếp cận chính xác ngay bây giờ.

Bản thử trực tiếp

Căn dọc và ngang.

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

Chỉ nằm ngang (miễn là trục flex chính là ngang là mặc định)

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

Câu trả lời gốc sử dụng chiều rộng cố định và không có flexbox

Nếu người đăng ban đầu muốn căn chỉnh dọc và trung tâm khá dễ dàng cho chiều rộng và chiều cao cố định của nút, hãy thử cách sau

Bản thử trực tiếp

CSS

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

chỉ cần căn chỉnh ngang

button{
    margin: 0 auto;
}

hoặc là

div{
    text-align:center;
}

Bạn chỉ có thể thực hiện:

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

Hoặc bạn có thể làm điều đó như thế này thay vào đó:

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

Người đầu tiên sẽ căn giữa mọi thứ trong div. Một cái khác sẽ căn giữa chỉ nút.

et voila:

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

Cập nhật : Nếu OP đang tìm trung tâm ngang và dọc, câu trả lời này sẽ thực hiện cho phần tử chiều rộng / chiều cao cố định.

Ký quỹ: 0 tự động; là câu trả lời đúng cho chỉ định tâm ngang. Để định tâm cả hai cách một cái gì đó như thế này sẽ hoạt động, sử dụng 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);

Cập nhật ... năm năm sau , người ta có thể sử dụng flexbox trên phần tử DIV gốc để dễ dàng căn giữa nút theo cả chiều ngang và chiều dọc.

Bao gồm tất cả các tiền tố trình duyệt, để được hỗ trợ tốt nhất

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>

Với chi tiết hạn chế được cung cấp, tôi sẽ giả sử tình huống đơn giản nhất và nói rằng bạn có thể sử dụng text-align: center:

http://jsfiddle.net/pMxty/

Sử dụng flexbox

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

Và sau đó thêm lớp vào nút của bạn.

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

Bạn nên làm nó đơn giản ở đây bạn đi:

đầu tiên bạn có vị trí ban đầu của văn bản hoặc nút của bạn:

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

Bằng cách thêm dòng mã css này vào thẻ h2 hoặc vào thẻ div giữ thẻ nút

kiểu: "text-align: centre;"

Cuối cùng Mã kết quả sẽ là:

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

Đi qua điều này và nghĩ rằng tôi cũng sẽ rời khỏi giải pháp mà tôi đã sử dụng, nó sử dụng line-heightvà text-align: centerthực hiện cả định tâm dọc và ngang:

Nhấn vào đây để làm việc với JSFiddle

Để căn giữa <button type = "button">cả hai chiều dọc và chiều ngang trong phạm vi <div>chiều rộng được tính toán linh hoạt như trong trường hợp của bạn, đây là việc cần làm:

1. Đặt text-align: center;thành gói <div>: điều này sẽ căn giữa nút bất cứ khi nào bạn thay đổi kích thước <div>(hay đúng hơn là cửa sổ)

2. Đối với căn chỉnh dọc, bạn sẽ cần phải đặt margin: valuepx;cho nút. Đây là quy tắc về cách tính toán valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

Dưới đây là bản demo của Bin Bin .

Câu trả lời siêu đơn giản sẽ áp dụng cho hầu hết các trường hợp là chỉ cần đặt lề 0 autovà đặt màn hình thành block. Bạn có thể thấy cách tôi tập trung vào nút của mình trong bản demo trên CodePen

Điều dễ nhất là nhập nó dưới dạng "div", cung cấp cho nó "lề: 0 tự động" nhưng nếu bạn muốn nó ở giữa, bạn cần phải tạo chiều rộng cho nó

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

Tùy chọn Responsive CSS để căn giữa một nút theo chiều dọc và chiều ngang mà không quan tâm đến kích thước phần tử cha (sử dụng móc thuộc tính dữ liệu cho mối quan tâm rõ ràng và tách biệt) :

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

Câu đố: https://jsfiddle.net/crrollyson/zebo1z8f/

Cách phản hồi để tập trung vào nút của bạn trong 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>

Giả sử div là #div và nút là #button:

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

#button {}

Sau đó lồng nút vào div như bình thường.