Bagaimana saya bisa memusatkan secara horizontal di <div>dalam orang lain <div>menggunakan CSS?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Anda dapat menerapkan CSS ini ke bagian dalam <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Tentu saja, Anda tidak perlu mengatur widthuntuk 50%. Lebar kurang dari isi <div>akan bekerja. Inilah margin: 0 autoyang dilakukan pemusatan yang sebenarnya.

Jika Anda menargetkan Internet Explorer 8 (dan lebih baru), mungkin lebih baik memilikinya:

#inner {
  display: table;
  margin: 0 auto;
}

Ini akan membuat pusat elemen dalam secara horizontal dan berfungsi tanpa menetapkan yang spesifik width.

Contoh kerja di sini:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Jika Anda tidak ingin menetapkan lebar tetap di bagian dalam divAnda bisa melakukan sesuatu seperti ini:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Itu membuat bagian dalam divmenjadi elemen inline yang dapat dipusatkan text-align.

Pendekatan terbaik adalah dengan CSS 3 .

Model kotak:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Menurut kegunaan Anda, Anda juga dapat menggunakan box-orient, box-flex, box-directionproperti.

Flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Baca lebih lanjut tentang memusatkan elemen anak

• Tautan 2

• Tautan 3

• Tautan 4

Dan ini menjelaskan mengapa model kotak adalah pendekatan terbaik :

• Mengapa model kotak W3C dianggap lebih baik?

Misalkan lebar div Anda adalah 200 piksel:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Pastikan elemen induk diposisikan , yaitu relatif, tetap, absolut, atau lengket.

Jika Anda tidak tahu lebar div Anda, Anda bisa menggunakan transform:translateX(-50%);bukannya margin negatif.

https://jsfiddle.net/gjvfxxdj/

Dengan CSS calc () , kode bisa menjadi lebih sederhana:

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Prinsipnya masih sama; letakkan item di tengah dan ganti lebar.

Saya telah membuat contoh ini untuk menunjukkan bagaimana secara vertikal dan horizontal align .

Kode dasarnya adalah ini:

#outer {
  position: relative;
}

dan...

#inner {
  margin: auto;
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

Dan itu akan tetap di centerbahkan ketika Anda mengubah ukuran layar Anda.

Beberapa poster telah menyebutkan cara CSS 3 untuk menggunakan pusat display:box.

Sintaks ini sudah usang dan tidak boleh digunakan lagi. [Lihat juga posting ini] .

Jadi hanya untuk kelengkapan di sini adalah cara terbaru untuk memusatkan pada CSS 3 menggunakan Modul Layout Kotak Fleksibel .

Jadi jika Anda memiliki markup sederhana seperti:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... dan Anda ingin memusatkan item Anda di dalam kotak, inilah yang Anda butuhkan pada elemen induk (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Jika Anda perlu mendukung browser lama yang menggunakan sintaks lama untuk flexbox, inilah tempat yang bagus untuk dilihat.

Jika Anda tidak ingin menetapkan lebar tetap dan tidak ingin margin tambahan, tambahkan display: inline-blockke elemen Anda.

Kamu bisa menggunakan:

#element {
    display: table;
    margin: 0 auto;
}

Memusatkan div yang tinggi dan lebarnya tidak diketahui

Secara horizontal dan vertikal. Ini bekerja dengan browser yang cukup modern (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, dll.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="content">This works with any content</div>

Tinker dengannya lebih jauh di Codepen atau JSBin .

Itu tidak bisa dipusatkan jika Anda tidak memberi lebar. Jika tidak, maka akan, secara default, mengambil seluruh ruang horisontal.

Properti kotak-align CSS 3

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Atur widthdan atur margin-leftdan margin-rightke auto. Itu hanya untuk horizontal . Jika Anda menginginkan keduanya, Anda hanya perlu melakukannya dengan dua cara. Jangan takut untuk bereksperimen; tidak seperti Anda akan merusak apa pun.

Saya baru-baru ini harus memusatkan div "tersembunyi" (yaitu, display:none;) yang memiliki bentuk tabel di dalamnya yang perlu dipusatkan pada halaman. Saya menulis kode jQuery berikut untuk menampilkan div tersembunyi dan kemudian memperbarui konten CSS ke lebar tabel yang dihasilkan secara otomatis dan mengubah margin ke pusatnya. (Tampilan beralih dipicu dengan mengklik tautan, tetapi kode ini tidak perlu ditampilkan.)

CATATAN: Saya membagikan kode ini, karena Google membawa saya ke solusi Stack Overflow ini dan semuanya akan berfungsi kecuali bahwa elemen tersembunyi tidak memiliki lebar dan tidak dapat diubah ukurannya / dipusatkan sampai setelah mereka ditampilkan.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

Cara saya biasanya menggunakan posisi absolut:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

Bagian luar tidak perlu propertites tambahan untuk bekerja.

Untuk Firefox dan Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

Untuk Internet Explorer, Firefox, dan Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

The text-align:properti adalah opsional untuk browser modern, tapi perlu di Internet Explorer quirks Mode untuk dukungan warisan browser.

Menggunakan:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Solusi lain untuk ini tanpa harus menetapkan lebar untuk salah satu elemen adalah menggunakan transformatribut CSS 3 .

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

Kuncinya adalah translateX(-50%)mengatur #innerelemen 50 persen ke kiri lebar sendiri. Anda dapat menggunakan trik yang sama untuk perataan vertikal.

Berikut adalah biola yang menunjukkan perataan horizontal dan vertikal.

Informasi lebih lanjut tentang Jaringan Pengembang Mozilla .

Chris Coyier yang menulis posting bagus tentang 'Centering in the Unknown' di blog-nya. Ini adalah kumpulan dari beberapa solusi. Saya memposting satu yang tidak diposting dalam pertanyaan ini. Ini memiliki lebih banyak dukungan browser daripada solusi Flexbox , dan Anda tidak menggunakan display: table;yang dapat merusak hal-hal lain.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Baru-baru ini saya menemukan pendekatan:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

Kedua elemen harus memiliki lebar yang sama agar berfungsi dengan benar.

Misalnya, lihat tautan ini dan cuplikan di bawah ini:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Jika Anda memiliki banyak anak di bawah orangtua, maka konten CSS Anda harus seperti contoh ini pada biola .

Tampilan konten HTML menyukai ini:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Kemudian lihat contoh ini tentang biola .

Hanya memusatkan secara horizontal

Dalam pengalaman saya, cara terbaik untuk memusatkan kotak secara horizontal adalah dengan menerapkan properti berikut:

Wadah:

• harus punya text-align: center;

Kotak konten:

• harus punya display: inline-block;

Demo:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Lihat juga Fiddle ini !

Berpusat secara horizontal & vertikal

Dalam pengalaman saya, cara terbaik untuk memusatkan kotak baik secara vertikal maupun horizontal adalah dengan menggunakan wadah tambahan dan menerapkan properti berikut:

Wadah luar:

• harus punya display: table;

Wadah batin:

• harus punya display: table-cell;
• harus punya vertical-align: middle;
• harus punya text-align: center;

Kotak konten:

• harus punya display: inline-block;

Demo:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Lihat juga Fiddle ini !

Cara termudah:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

Jika lebar konten tidak diketahui, Anda dapat menggunakan metode berikut . Misalkan kita memiliki dua elemen ini:

• .outer - lebar penuh
• .inner - tidak ada set lebar (tapi lebar maks bisa ditentukan)

Misalkan lebar elemen dihitung masing-masing 1000 piksel dan 300 piksel. Lanjutkan sebagai berikut:

1. Bungkus .innerdi dalam.center-helper
2. Buat .center-helperblok sebaris; itu menjadi ukuran yang sama dengan .innerlebar 300 piksel.
3. Dorong .center-helper50% ke kanan relatif ke induknya; ini menempatkan sebelah kiri pada 500 piksel wrt. luar.
4. Dorong .inner50% ke kiri relatif ke induknya; ini menempatkan kirinya di -150 piksel wrt. center helper yang berarti sebelah kirinya berada pada 500 - 150 = 350 piksel wrt. luar.
5. Setel overflow .outerke tersembunyi untuk mencegah scrollbar horizontal.

Demo:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

Anda dapat melakukan sesuatu seperti ini

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Ini juga akan menyelaraskan #innervertikal. Jika Anda tidak ingin, hapus displaydan vertical-alignproperti;

Inilah yang Anda inginkan dengan cara terpendek.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

Perataan teks: tengah

Menerapkan text-align: centerkonten inline dipusatkan di dalam kotak baris. Namun karena div dalam telah secara default width: 100%Anda harus menetapkan lebar tertentu atau menggunakan salah satu dari berikut ini:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Margin: 0 otomatis

Menggunakan margin: 0 autoadalah pilihan lain dan lebih cocok untuk kompatibilitas browser yang lebih lama. Ini bekerja bersama display: table.

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Flexbox

display: flexberperilaku seperti elemen blok dan menjabarkan isinya sesuai dengan model flexbox. Ini bekerja dengan justify-content: center.

Harap dicatat: Flexbox kompatibel dengan sebagian besar browser tetapi tidak semua. Lihat di sini untuk daftar kompatibilitas browser yang lengkap dan terbaru.

#inner {
  display: inline-block;
}

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

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Mengubah

transform: translatememungkinkan Anda memodifikasi ruang koordinat model pemformatan visual CSS. Menggunakannya, elemen dapat diterjemahkan, diputar, diskalakan, dan miring. Untuk memusatkan secara horizontal diperlukan position: absolutedan left: 50%.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (Sudah usang)

Tag <center>adalah alternatif HTML untuk text-align: center. Ini berfungsi pada browser lama dan sebagian besar yang baru tetapi tidak dianggap sebagai praktik yang baik karena fitur ini sudah usang dan telah dihapus dari standar Web.

#inner {
  display: inline-block;
}

<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

Anda dapat menggunakan display: flexuntuk div luar Anda dan untuk memusatkan secara horizontal Anda harus menambahkanjustify-content: center

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

atau Anda dapat mengunjungi w3schools - CSS flex Property untuk lebih banyak ide.

Flex memiliki lebih dari 97% cakupan dukungan browser dan mungkin menjadi cara terbaik untuk menyelesaikan masalah semacam ini dalam beberapa baris:

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

Yah, saya berhasil menemukan solusi yang mungkin cocok untuk semua situasi, tetapi menggunakan JavaScript:

Berikut strukturnya:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

Dan inilah cuplikan JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Jika Anda ingin menggunakannya dalam pendekatan responsif, Anda dapat menambahkan yang berikut:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Metode ini juga berfungsi dengan baik:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

Untuk bagian dalam <div>, satu-satunya syarat adalah kondisinya heightdan widthtidak boleh lebih besar dari wadahnya.

Ada satu opsi yang saya temukan:

Semua orang mengatakan untuk menggunakan:

margin: auto 0;

Tetapi ada opsi lain. Setel properti ini untuk div induk. Ini berfungsi dengan baik kapan saja:

text-align: center;

Dan lihat, anak pergi pusat.

Dan akhirnya CSS untuk Anda:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}