วิธีการจัดปุ่มให้อยู่กึ่งกลางภายใน div?

ฉันมี div ที่มีความกว้าง 100%

ฉันต้องการจัดปุ่มให้อยู่ตรงกลางปุ่มฉันจะทำสิ่งนี้ได้อย่างไร

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

คำตอบเดิมโดยใช้ความกว้างคงที่และไม่มีเฟล็กบ็อกซ์

หากโปสเตอร์ต้นฉบับต้องการการจัดตำแหน่งแนวตั้งและกึ่งกลางมันค่อนข้างง่ายสำหรับความกว้างคงที่และความสูงของปุ่มลองต่อไปนี้

การสาธิตสด

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 อีกอันหนึ่งจะจัดกึ่งกลางแค่ปุ่ม

และอื่น ๆ :

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

อัปเดต : ถ้า 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);

อัปเดต ... ห้าปีต่อมาผู้ใช้หนึ่งคนสามารถใช้ flexbox บนองค์ประกอบ DIV หลักเพื่อให้ปุ่มอยู่ตรงกลางทั้งแนวนอนและแนวตั้งได้อย่างง่ายดาย

รวมถึงคำนำหน้าเบราว์เซอร์ทั้งหมดเพื่อการสนับสนุนที่ดีที่สุด

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>

โดยการเพิ่มบรรทัดรหัส css นี้ไปยังแท็กh2หรือแท็กdivที่ถือแท็กปุ่ม

สไตล์: "จัดข้อความ: กลาง;"

Finaly รหัสผลลัพธ์จะเป็น:

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

มาถึงเรื่องนี้และคิดว่าฉันจะออกจากโซลูชันที่ฉันใช้เช่นกันซึ่งใช้line-heightและtext-align: centerทำทั้งแนวตั้งและแนวกึ่งกลาง:

คลิกที่นี่เพื่อใช้งาน JSFiddle

หากต้องการจัดกึ่งกลาง<button type = "button">ทั้งแนวตั้งและแนวนอนภายใน<div>ความกว้างที่คำนวณแบบไดนามิกเช่นเดียวกับในกรณีของคุณนี่คือสิ่งที่ต้องทำ:

1. ตั้งค่าtext-align: center;การตัดคำ<div>: ปุ่มนี้จะอยู่ตรงกลางทุกครั้งที่คุณปรับขนาด<div>(หรือแทนหน้าต่าง)

2. สำหรับการจัดตำแหน่งแนวตั้งคุณจะต้องตั้งค่าmargin: valuepx;สำหรับปุ่ม นี่คือกฎในการคำนวณvaluepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

นี่คือการสาธิต JS Bin

คำตอบง่ายสุดที่จะใช้กับกรณีส่วนใหญ่เป็นเพียงการทำให้การกำหนดอัตรากำไรไปและตั้งค่าการแสดงผลให้0 auto blockคุณสามารถดูว่าฉันตั้งศูนย์กลางปุ่มของฉันไว้ที่ตัวอย่างในCodePen ได้อย่างไร

สิ่งที่ง่ายที่สุดคือใส่มันเป็น "div" ให้ "margin: 0 auto" แต่ถ้าคุณต้องการให้อยู่กึ่งกลางคุณต้องให้ความกว้าง

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

ตัวเลือก CSS ที่ตอบสนองต่อการจัดกึ่งกลางปุ่มในแนวตั้งและแนวนอนโดยไม่เกี่ยวข้องกับขนาดองค์ประกอบหลัก(การใช้ตะขอคุณลักษณะของข้อมูลเพื่อความชัดเจนและการแยก) :

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

ซอ: https://jsfiddle.net/crrollyson/zebo1z8f/

วิธีตอบสนองต่อปุ่มของคุณอยู่ตรงกลางใน 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>

สมมติว่า div คือ #div และปุ่มคือ #button:

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

#button {}

จากนั้นซ้อนปุ่มเป็น div ตามปกติ