CSS: elemen tengah dalam elemen <div>

Untuk memusatkan elemen HTML saya bisa menggunakan CSS left: 50%;. Namun, ini memusatkan elemen sehubungan dengan seluruh jendela.

Saya memiliki elemen yang merupakan anak dari <div>elemen dan saya ingin memusatkan anak sehubungan dengan orang tua ini <div>, bukan seluruh jendela.

Saya tidak ingin wadah <div>memiliki semua kontennya terpusat, hanya satu anak tertentu.

Atur text-align:center;ke div induk, dan margin:auto;ke div anak.

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

Sumber daya yang bagus untuk memusatkan sebagian besar apa saja.
http://howtocenterincss.com/

Sebenarnya ini sangat mudah dengan kotak fleksibel 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>

MEMPERBARUI:

Tampaknya saya tidak membaca edit OP pada saat saya menulis jawaban ini. Kode di atas akan memusatkan semua elemen dalam (tanpa tumpang tindih di antara mereka), tetapi OP hanya menginginkan elemen tertentu untuk dipusatkan , bukan elemen dalam lainnya. Jadi @Warface answer metode kedua lebih tepat, tetapi masih membutuhkan pemusatan vertikal:

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

Ini harus menjadi pusat div

2016 - Metode 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; pada div induk Harus melakukan trik

Untuk memusatkan hanya anak tertentu:

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

ATAU, Anda dapat menggunakan flex juga, tetapi itu akan memusatkan semua anak

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

Anda dapat menggunakan nama kelas flex bootstrap seperti itu:

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

Itu akan bekerja bahkan dengan sejumlah elemen di dalamnya.

Apakah div lebar tetap atau lebar fluida? Either way, untuk lebar fluida Anda bisa menggunakan:

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

Atau Anda dapat mengatur div induk ke text-align:center;dan div anak ketext-align:left; .

Dan left:50%;hanya memusatkannya sesuai dengan seluruh halaman saat div diatur ke position:absolute;. Jika Anda mengatur div ke left:50%;itu harus melakukannya relatif terhadap lebar div induk. Untuk lebar tetap, lakukan ini:

#parent {
width:500px;
}

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

berikan saja div induknya position: relative

Jika Anda ingin menggunakan CSS3:

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

Anda mungkin ingin melakukan pencarian lebih lanjut untuk mengetahui cara mendapatkan persentase agar sesuai dengan lebar elemen Anda.

Pertama-tama Anda dapat melakukannya dengan kiri: 50% untuk memusatkannya relatif terhadap div induk tetapi untuk itu Anda perlu mempelajari posisi CSS.

Salah satu solusi yang mungkin dari banyak adalah melakukan sesuatu seperti

    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

jika div Anda untuk dipusatkan diposisikan relatif, Anda bisa melakukannya

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

kiri: 50% bekerja secara resektif ke induk terdekat dengan lebar statis yang ditetapkan. Coba lebar: 500px atau sesuatu di div induk. Atau, buat konten yang Anda butuhkan untuk ditampilkan di tengah: blokir dan atur margin kiri dan kanan ke otomatis.

Jika elemen turunan adalah inline (mis. Bukan a div, tabledll) saya akan membungkusnya di dalam a divatau a pdan membuat teks pembungkus menyelaraskan properti css sama dengan pusat.

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

Kalau tidak, jika elemennya adalah blok ( display: block, misalnya a divatau a p) dengan lebar tetap, saya akan mengatur margin css properti kiri dan kanan menjadi otomatis.

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

Anda tentu saja dapat menambahkan text-align: centerelemen pembungkus untuk membuat isinya terpusat juga.

Saya tidak akan repot-repot memposisikan karena IMHO itu bukan cara untuk mengatasi masalah OPs tetapi pastikan untuk memeriksa tautan ini , sangat membantu.

Buat elemen div baru untuk elemen Anda ke tengah, lalu tambahkan kelas khusus untuk memusatkan elemen itu seperti ini

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

Css

.centered{
    text-align:center;
}

Saya telah menemukan solusi lain

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

dan di dalam tubuh

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

Ini akan memusatkan div konten Anda setiap kali wadah Anda lebih besar atau lebih kecil. Dalam hal ini, konten Anda harus lebih besar dari 1100% dari wadah agar tidak terpusat, tetapi dalam hal ini Anda dapat membuat dengan containerSecond lebih besar, dan itu akan bekerja

Tetapkan text-align: center;ke orang tua dan display: inline-block;ke div.

misalnya, saya punya artikel div yang ada di dalam konten utama .. Di dalam artikel ada gambar dan di bawah gambar itu ada tombol, gaya seperti ini:

.article {

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

} .artikel {

}

/ * di dalam artikel saya ingin gambar terpusat * /

.article img {

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

}

/ * Sekarang di bawah gambar ini di elemen artikel yang sama harus ada tombol seperti baca lebih lanjut Tentu saja Anda perlu bekerja dengan mereka atau% ketika itu di dalam desain responsif * /

.tombol {

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..*/

}

Semoga berhasil

Jika Anda ingin memusatkan elemen di dalam div dan tidak peduli tentang ukuran divisi Anda bisa menggunakan kekuatan Flex. Saya lebih suka menggunakan flex dan tidak menggunakan ukuran yang tepat untuk elemen.

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

Seperti yang Anda lihat Outer div adalah wadah Flex dan Inner harus item Flex yang ditentukan dengan flex: 1 1 auto;untuk lebih memahami Anda bisa melihat sampel sederhana ini. http://jsfiddle.net/QMaster/hC223/

Semoga bantuan ini.

punyaku ingin sihir.

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>