CSS: องค์ประกอบกลางภายในองค์ประกอบ <div>

ไปยังศูนย์องค์ประกอบ HTML left: 50%;ฉันสามารถใช้แบบ CSS อย่างไรก็ตามสิ่งนี้อยู่ตรงกลางองค์ประกอบที่เกี่ยวข้องกับหน้าต่างทั้งหมด

ฉันมีองค์ประกอบที่เป็นลูกของ<div>องค์ประกอบและฉันต้องการให้เด็กอยู่ตรงกลางกับผู้ปกครองรายนี้<div>ไม่ใช่หน้าต่างทั้งหมด

ฉันไม่ต้องการให้คอนเทนเนอร์<div>มีเนื้อหาทั้งหมดที่เป็นศูนย์กลางเพียงเด็กคนหนึ่งที่เฉพาะเจาะจง

ตั้งค่าtext-align:center;เป็น div div และmargin:auto;ไปยัง div div

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
.left {
    margin:auto auto auto 0;
    background-color:red;
}
.right {
    margin:auto 0 auto auto;
    background-color:yellow;
}

<div id="parent">
    <div id="child1" class="block center">
        a block to align center and with text aligned left
    </div>
    <div id="child2" class="block left">
        a block to align left and with text aligned left
    </div>
    <div id="child3" class="block right">
        a block to align right and with text aligned left
    </div>
</div>

นี่เป็นทรัพยากรที่ดีสำหรับศูนย์ส่วนใหญ่ทุกอย่าง
http://howtocenterincss.com/

จริงนี้ตรงไปตรงมามากกับ CSS3 ดิ้นกล่อง

.flex-container{
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
  
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <div class="inner-element"></div>
</div>

UPDATE:

ดูเหมือนว่าฉันไม่ได้อ่านการแก้ไข OP ในเวลาที่ฉันเขียนคำตอบนี้ รหัสด้านบนจะจัดวางองค์ประกอบภายในทั้งหมด (โดยไม่ทับซ้อนกัน) แต่OP ต้องการเพียงองค์ประกอบเฉพาะที่จะอยู่กึ่งกลางไม่ใช่องค์ประกอบภายในอื่น ๆ ดังนั้น @Warface คำตอบวิธีที่สองเป็นที่นิยมมากขึ้น แต่ก็ยังต้องมีการจัดกึ่งกลางแนวตั้ง:

.flex-container{
  position: relative;
  
  /* Other styling stuff */
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%,-50%);
  /* or 3d alternative if you will add animations (smoother transitions) */
  transform: translate3d(-50%,-50%,0);

  /* Other styling stuff */
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <p>Other inner elements like this follows the normal flow.</p>
  <div class="inner-element"></div>
</div>

CSS

  body{
    text-align:center;
    }
    .divWrapper{
    width:960px //Change it the to width of the parent you want
    margin: 0 auto;
    text-align:left;
    }

HTML

<div class="divWrapper">Tada!!</div>

สิ่งนี้ควรอยู่ตรงกลาง div

2016 - วิธี HTML5 + CSS3

CSS

div#relative{
  position:relative;
}

div#thisDiv{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

HTML

<div id="relative">
  <div id="thisDiv">Bla bla bla</div>
</div>

Fiddledlidle

https://jsfiddle.net/1z7m83dx/

text-align:center; เกี่ยวกับ div ผู้ปกครองควรทำเคล็ดลับ

วิธีจัดกึ่งกลางเฉพาะเด็กที่เฉพาะเจาะจง:

.parent {
  height: 100px;
  background-color: gray;
  position: relative;
}

.child {
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20px;
  height:20px;
  margin: auto;

}

<div class="parent">
   <span class="child">hi</span>
</div>  

หรือคุณสามารถใช้ flex ได้เช่นกัน แต่นั่นจะทำให้เด็กทุกคนอยู่ตรงกลาง

.parent {
  height: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: white;  
}

<div class="parent">
   <span class="child">hi</span>
</div>

คุณสามารถใช้ชื่อคลาส bootstrap flex เช่นนั้น:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

ที่จะทำงานได้แม้จะมีองค์ประกอบหลายอย่างอยู่ภายใน

div เป็นความกว้างคงที่หรือความกว้างของเหลวหรือไม่ สำหรับความกว้างของของไหลคุณสามารถใช้:

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

หรือคุณอาจจะตั้ง div แม่และเด็กtext-align:center; divtext-align:left;

และleft:50%;เพียงศูนย์ได้ตามทั้งหน้าเมื่อ div position:absolute;ที่มีการตั้งค่า หากคุณตั้งค่า div left:50%;ไว้ควรทำโดยสัมพันธ์กับความกว้างของ div parent สำหรับความกว้างคงที่ให้ทำสิ่งนี้:

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}

เพียงแค่ให้ div ผู้ปกครอง position: relative

หากคุณต้องการใช้ CSS3:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

คุณอาจต้องการทำการค้นหาเพิ่มเติมเพื่อหาวิธีหาเปอร์เซ็นต์เพื่อให้พอดีกับความกว้างขององค์ประกอบ

ก่อนอื่นคุณสามารถทำได้ด้วยซ้าย: 50% เพื่อจัดให้อยู่กึ่งกลางเมื่อเทียบกับ div div แต่คุณต้องเรียนรู้การวางตำแหน่ง CSS

ทางออกหนึ่งที่เป็นไปได้จากหลาย ๆ คือทำสิ่งที่ชอบ

    div.parent { text-align:center; }    //will center align every thing in this div as well as in the children element
    div.parent div { text-align:left;}   //to restore so every thing would start from left

ถ้า div ของคุณอยู่กึ่งกลางอยู่ในตำแหน่งที่ค่อนข้างคุณก็ทำได้

    .mydiv { position:relative; margin:0 auto; } 

ซ้าย: 50% ทำงานอย่างใกล้ชิดกับผู้ปกครองที่ใกล้ที่สุดโดยกำหนดความกว้างคงที่ ลองความกว้าง: 500px หรืออะไรสักอย่างใน div parent หรือทำให้เนื้อหาที่คุณต้องการแสดงอยู่ตรงกลาง: บล็อกและตั้งระยะขอบซ้ายและขวาเป็นอัตโนมัติ

หากองค์ประกอบของเด็กเป็นแบบอินไลน์ (เช่นไม่ใช่div, tableฯลฯ ) ฉันจะห่อมันไว้ในdivหรือหรือ a pและทำให้ข้อความของ wrapper จัดตำแหน่งคุณสมบัติ css เท่ากับกึ่งกลาง

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

มิฉะนั้นถ้าองค์ประกอบเป็นบล็อก ( display: blockเช่น a divหรือ a p) ที่มีความกว้างคงที่ฉันจะตั้งค่าระยะขอบซ้ายและขวาของคุณสมบัติ css เป็นอัตโนมัติ

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

แน่นอนคุณสามารถเพิ่มtext-align: centerองค์ประกอบ wrapper เพื่อให้เนื้อหาเป็นศูนย์กลางเช่นกัน

ฉันไม่รำคาญกับการวางตำแหน่งเพราะ IMHO ไม่ใช่วิธีที่จะไปหาปัญหา OP แต่ให้แน่ใจว่าได้ตรวจสอบลิงก์นี้มีประโยชน์มาก

สร้างองค์ประกอบ div ใหม่สำหรับองค์ประกอบของคุณให้อยู่กึ่งกลางจากนั้นเพิ่มคลาสเฉพาะสำหรับการจัดองค์ประกอบนั้นให้อยู่กึ่งกลาง

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

css

.centered{
    text-align:center;
}

ฉันพบวิธีแก้ไขปัญหาอื่นแล้ว

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

และในร่างกาย

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

วิธีนี้จะทำให้ศูนย์เนื้อหาของคุณอยู่กึ่งกลางเมื่อคอนเทนเนอร์ของคุณใหญ่กว่าหรือเล็กกว่า ในกรณีนี้เนื้อหาของคุณควรใหญ่กว่า 1100% ของคอนเทนเนอร์ไม่ให้อยู่กึ่งกลาง แต่ในกรณีนั้นคุณสามารถสร้างจาก containerSecond ใหญ่ขึ้นและมันจะทำงาน

มอบหมายtext-align: center;ให้ผู้ปกครองและdisplay: inline-block;ฝ่าย

ตัวอย่างเช่นฉันมี div บทความซึ่งอยู่ใน div เนื้อหาหลัก .. ภายในบทความ theres ภาพและภายใต้ภาพนั้นเป็นปุ่มสไตล์ดังนี้:

.article {

width: whatever;
text-align: center; 
float: whatever (in case you got more articles in a row); 
margin: give it whatever margin you want;

} .article {

}

/ * ภายในบทความที่ฉันต้องการให้ภาพอยู่กึ่งกลาง * /

.article img {

float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;

}

/ * ตอนนี้ภายใต้ภาพนี้ในองค์ประกอบบทความเดียวกันควรมีปุ่มเหมือนอ่านเพิ่มเติมแน่นอนคุณต้องทำงานกับ em หรือ% เมื่อมันอยู่ในการออกแบบที่ตอบสนอง * /

.button {

background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/

}

โชคดี

ถ้าคุณต้องการจัดวางองค์ประกอบภายใน div และไม่สนใจขนาดแผนกคุณสามารถใช้พลังงานแบบยืดหยุ่นได้ ฉันชอบใช้ดิ้นและไม่ใช้ขนาดที่แน่นอนสำหรับองค์ประกอบ

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

ดังที่คุณเห็นด้านนอก div คือ Flex container และ Inner ต้องเป็นรายการ Flex ที่ระบุด้วยflex: 1 1 auto;เพื่อความเข้าใจที่ดีขึ้นคุณจะเห็นตัวอย่างง่ายๆนี้ http://jsfiddle.net/QMaster/hC223/

หวังว่าความช่วยเหลือนี้

ฉันต้องการเวทมนตร์

html, body {
 height: 100%;
}

.flex-container{
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}


<div class="flex-container">
  <div>Content</div>
</div>

<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">

     </div>
     </div> 
  </body>
</html>