Bagaimana cara memusatkan elemen yang benar-benar diposisikan di div?

1078

Saya perlu menempatkan elemen div(dengan position:absolute;) di tengah jendela saya. Tetapi saya mengalami masalah dalam melakukannya, karena lebarnya tidak diketahui .

Saya mencoba ini. Tetapi perlu disesuaikan karena lebarnya responsif.

.center {
  left: 50%;
  bottom:5px;
}

Ada ide?

css css-position center absolute Ish
sumber

4

Anda memiliki contoh dalam contoh Absolute center yang dapat digeneralisasi dalam situasi yang berbeda.

Mihai8

2

Ada jawaban yang lebih baik untuk pertanyaan ini di stackoverflow.com/questions/17976995/…

Andrew Swift

1333

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>

Luaskan cuplikan

bobince
sumber

76

Luar biasa. Bekerja untukku! Satu masalah yang saya miliki: Gambar yang saya tengahkan cukup besar, ini menyebabkan div luar melampaui tepi kanan halaman dan menyebabkan pengguliran horizontal. Saya menukar properti css "kiri" dengan "kanan", dan sejauh ini berfungsi lebih baik karena melewati tepi kiri layar tidak menyebabkan pengguliran

BoomShaka

bagaimana jika pengguna telah menggulir halaman ke bawah, overylay muncul di bagian atas, apakah Anda pikir itu akan menjadi ide yang baik untuk menggunakan jquery untuk memperbaiki masalah gulir

PUG

1

satu solusi untuk masalah gulir bisa position: fixedtetapi bagaimana jika ketinggian tidak diketahui overlay, scroll bar untuk overlay harus diimplementasikan

PUG

3

Ada masalah kecil yang saya temui menggunakan teknik ini. Karena div luar mengambil 50% dari layar, beberapa pergeseran terjadi ketika teks lebih lebar dari screensize 50%. Saya memecahkan ini dengan mengatur div luar ke "width: 100%" dan menghapus properti kiri. Untuk div bagian dalam, saya cukup mengatur perataan teks ke tengah. Ini menyelesaikan masalah.

Nicky L.

3

Tinggi persentase relatif terhadap blok yang mengandung, dalam hal ini <html>. Tetapi <html>elemen tidak memiliki heightspesifikasi sehingga dibutuhkan ketinggian semua konten dalam dokumen, yang bukan apa-apa karena satu-satunya konten yang diposisikan secara absolut (dikeluarkan dari aliran konten). Menambahkan height: 100%ke <html>elemen membuat perbedaan untuk ini.

bobince

1801

Ini bekerja untuk saya:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Luaskan cuplikan

Matthias Weiler
sumber

36

Saya hanya ingin mengetahui bahwa margin negatif adalah CSS yang benar-benar valid dan tidak boleh dilihat sebagai "hack kotor". Margin negatif disebutkan dalam spesifikasi model kotak W3C. Beberapa orang tampaknya secara sewenang-wenang memutuskan bahwa ini adalah peretasan karena mereka a) tidak mengenal mereka, atau b) menggunakannya untuk memperbaiki CSS buruk mereka.

Joseph Ravenwolfe

58

lebar div yang akan dipusatkan harus diatur - tidak akan bekerja secara otomatis dengan, katakanlah, tombol dengan teks di atasnya.

Stefan

2

@ Yosua Ini hanya akan terpusat secara horizontal, tidak vertikal seperti jawaban lainnya.

ygoe

3

Saya lebih suka solusi ini karena tidak meningkatkan ukuran viewport.

iceydee

13

Untuk dukungan lintas browser: widthharus ditetapkan ke nilai tertentu agar ini berfungsi. autodan 100%tidak akan memusatkan elemen. display: block;Adalah sebuah keharusan. position: absolute;BUKAN suatu keharusan. Semua nilai akan berhasil. Elemen induk positionharus ditetapkan ke sesuatu selain static. Pengaturan leftdan rightuntuk 0tidak perlu. margin-left: auto; margin-right: auto;akan melakukan pekerjaan.

Onur Yıldırım

767

Solusi Responsif

Berikut adalah solusi yang baik untuk desain responsif atau dimensi yang tidak diketahui secara umum jika Anda tidak perlu mendukung IE8 dan lebih rendah.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

Tampilkan cuplikan kode

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Luaskan cuplikan

Ini JS Fiddle

Petunjuknya adalah, yaitu left: 50%relatif terhadap induk sedangkan translatetransformasi relatif terhadap lebar elemen / tinggi.

Dengan cara ini Anda memiliki elemen berpusat sempurna, dengan lebar fleksibel pada anak dan orang tua. Bonus: ini berfungsi bahkan jika anak lebih besar dari orang tua.

Anda juga dapat memusatkannya secara vertikal dengan ini (dan sekali lagi, lebar dan tinggi orangtua dan anak dapat sepenuhnya fleksibel (dan / atau tidak diketahui)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Ingatlah bahwa Anda mungkin perlu transformdiawali vendor juga. Sebagai contoh-webkit-transform: translate(-50%,-50%);

ProblemOfSumit
sumber

26

Dengan dukungan IE7 tidak lagi diperlukan, ini harus menjadi solusi de facto. Solusi ini lebih baik daripada teknik kiri: 0 / kanan: 0 karena itu membuat elemen lebar penuh sementara ini mempertahankan lebar dan bekerja pada elemen dengan lebar tidak diketahui.

aleemb

51

Sejauh ini jawaban terbaik, ini berfungsi jika kotak yang berisi div lebih kecil dari anak.

Kasus

2

@ChadJohnson tentu saja. Cobalah dengan webkit-awalan seperti yang saya sarankan.

ProblemsOfSumit

2

Ah, saya melewatkan catatan Anda tentang -webkit. Luar biasa.

Chad Johnson

3

transform: translatetampaknya membuat position: fixedtidak dapat digunakan pada anak-anak. Jawaban yang diterima bekerja lebih baik dalam hal ini.

dmvianna

49

Posting yang sangat bagus .. Hanya ingin menambahkan jika seseorang ingin melakukannya dengan tag div tunggal maka di sini jalan keluar:

Mengambil widthsebagai 900px.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

Dalam hal ini orang harus tahu widthsebelumnya.

pratikabu
sumber

26

"because the width is unknown"... ini tidak menjawab pertanyaan

Michel Ayres

15

hai @Michel sebenarnya ketika Anda mencari sesuatu yang terkait dengan memusatkan div absolut di google, tautan ini datang sebagai tautan pertama. Itu sebabnya saya menambahkan solusi ini, kalau-kalau seseorang seperti saya sedang mencari solusi di atas .. :)

pratikabu

1

Tidak terlalu berguna untuk desain responsif, tetapi itu bekerja untuk saya sampai saya mulai melakukan desain responsif. Ini adalah jawaban yang valid untuk memusatkan elemen lebar yang diketahui benar-benar diposisikan .

Sean Kendle

36

Pusat Mutlak

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Demo: http://jsbin.com/rexuk/2/

Diuji di Google Chrome, Firefox, dan IE8

Semoga ini membantu :)

Ijas Ameenudeen
sumber

Ini tidak berhasil, silakan periksa codepen codepen.io/anon/pen/YqWxjJ

Mark

1

Maaf, saya pikir ini akan berhasil, tetapi Anda harus memasukkan tinggi dan lebar tetap codepen.io/anon/pen/WwxEYQ

Mark

31

ini berfungsi untuk vertikal dan horizontal

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

dan jika Anda ingin menjadikan elemen center dari parent, atur posisi relative parent

 #parentElement{
      position:relative
  }

edit:

untuk perataan tengah vertikal, atur ketinggian ke elemen Anda. terima kasih kepada @Raul
jika Anda ingin menjadikan elemen center dari parent, atur posisi parent ke relative

Mohsen Abdollahi
sumber

2

Saya pikir Anda perlu menambahkan ketinggian agar vertikal berfungsi.

Raul

Sepertinya posisi ini di tengah halaman, bukan di tengah elemen lain.

Günter Zöchbauer

1

@ GünterZöchbauer ya, jika Anda ingin membuat elemen pusat orang tua, atur posisi relatif orang tua.

Mohsen Abdollahi

20

Mencari solusi saya mendapat jawaban di atas dan bisa membuat konten terpusat dengan Matthias Weiler tetapi menggunakan perataan teks.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

Bekerja dengan chrome dan Firefox.

cavila
sumber

5

Saya pikir Anda tidak perlu "text-align: center"

Tobias

Ini memperbaiki masalah saya di sini . Terima kasih!

Volomike

Saya membutuhkan "text-align: center", dan ini berfungsi jika solusi yang disarankan oleh @ProblemsOfSumit tidak berfungsi karena membuat pembungkus teks saya.

Nat

19

Jika Anda perlu memusatkan secara horizontal dan vertikal juga:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

michal.jakubeczy
sumber

perbaikan yang sangat keren terima kasih

Stanley Bateswar

15

** SOLUSI TANGGUNG JAWAB **

Dengan asumsi elemen dalam div, adalah div lain ...

solusi ini berfungsi dengan baik

<div class="container">
  <div class="center"></div>
</div>

yang kontainer dapat ukuran (harus posisi relatif)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

Elemen ( div ) juga bisa ukuran apa saja (harus lebih kecil dari wadah )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

Hasilnya akan terlihat seperti ini. Jalankan cuplikan kode

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}

<div class="container">
	<div class="center"></div>
</div>

Luaskan cuplikan

Saya menemukannya sangat membantu

RealMJDev
sumber

1

jenius. mengapa yang lain tidak datang dengan ini.

mesqueeb

Terima kasih, selamat coding

RealMJDev

13

Ini adalah campuran dari jawaban lain, yang bekerja untuk kami:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

Crashalot
sumber

Perbaikan yang bagus terima kasih kawan

Stanley Bateswar

12

Saya mengerti pertanyaan ini sudah memiliki beberapa jawaban, tetapi saya belum pernah menemukan solusi yang akan bekerja di hampir semua kelas yang juga masuk akal dan elegan, jadi inilah pendapat saya setelah mengutak-atik banyak:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

Luaskan cuplikan

Apa yang dilakukan mengatakan memberi saya top: 50%dan left: 50%, kemudian mengubah (menciptakan ruang) pada kedua X / Y sumbu ke -50%nilai, dalam arti "menciptakan ruang cermin".

Dengan demikian, ini menciptakan ruang yang sama pada semua 4 poin div, yang selalu berupa kotak (memiliki 4 sisi).

Ini akan:

Bekerja tanpa harus tahu tinggi / lebar orang tua.
Berusahalah untuk responsif.
Bekerja pada sumbu X atau Y. Atau keduanya, seperti dalam contoh saya.
Saya tidak dapat menemukan situasi di mana itu tidak berhasil.

Daniel Moss
sumber

Tolong beri tahu saya jika Anda menemukan situasi di mana ini tidak berhasil sehingga saya dapat mengedit pertanyaan dengan masukan Anda.

Daniel Moss

transform / translate akan menyebabkan safari membuat teks kabur pada skala tertentu

James Tan

@DanielMoss ada alasan untuk tidak menggunakan translate(-50%,-50%);?

Mark Baijens

12

Bekerja pada lebar acak yang tidak diketahui dari elemen posisi absolut yang ingin Anda miliki di tengah elemen wadah Anda.

Demo

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

teknologi rendah
sumber

9

Flex dapat digunakan untuk memusatkan div posisi absolut.

display:flex;
align-items:center;
justify-content:center;

Tampilkan cuplikan kode

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

Luaskan cuplikan

Dhaval Jardosh
sumber

di layar saya -Firefox 68.x, itu hanya tidak selaras, blok absolut muncul di bagian bawah blok relatif

WebWoman

Bisakah kamu mencoba ini display: -webkit-flex;?

Dhaval Jardosh

7

Sejauh yang saya tahu, ini tidak mungkin dicapai untuk lebar yang tidak diketahui.

Anda bisa - jika itu berhasil dalam skenario Anda - benar-benar memposisikan elemen tak terlihat dengan lebar dan tinggi 100%, dan menempatkan elemen di tengah sana menggunakan margin: otomatis dan mungkin vertikal-align. Jika tidak, Anda perlu Javascript untuk melakukan itu.

Pekka
sumber

+1 untuk hal "margin: auto". Saya telah mencoba ini sebelumnya untuk memusatkan div secara horizontal menggunakan garis "margin: 0 auto" - "0" yang diterapkan pada margin vertikal dan "auto" horizontal. Saya pikir inilah yang digunakan oleh StackOverflow untuk div level paling atas untuk mendapatkan 2 batas putih tebal di sisi halaman. Namun, halaman W3Schools pada margin CSS menyatakan untuk nilai otomatis bahwa "Hasil ini tergantung pada browser" - Saya belum secara pribadi mencobanya di banyak browser yang berbeda, jadi saya tidak bisa mengomentari hal ini (tetapi itu jelas melakukan trik dalam beberapa dari mereka)

Steg

1

dimungkinkan untuk lebar yang tidak diketahui (dan tinggi) jika IE8 tidak menjadi masalah. Lihat jawaban saya untuk detailnya.

ProblemsOfSumit

7

Saya ingin menambahkan jawaban @ bobince:

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

Ditingkatkan: /// ini membuat scrollbar horizontal tidak muncul dengan elemen besar di div terpusat.

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>

Botol kecil
sumber

6

Ini adalah plugin jQuery yang berguna untuk melakukan ini. Ditemukan di sini . Saya tidak berpikir itu mungkin murni dengan CSS

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

Ben Shelock
sumber

ini adalah cara yang lebih baik, dan terutama dengan desain repsonsive.

m4tm4t

Akan sepele jika jQuery digunakan dalam hal apa pun

Code Whisperer

8

ini BUKAN cara yang lebih baik. Selalu lebih baik menggunakan CSS bila memungkinkan. Memusatkan DIV dimungkinkan dengan CSS di setiap sumbu dan juga untuk halaman responsif. Tidak perlu JavaScript!

ProblemsOfSumit

1

@yckart dan dalam hal ini alatnya adalah CSS.

ProblemsOfSumit

5

Versi sass / kompas dari Solusi Responsif di atas:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

Adam Spence
sumber

4

transform: translate(-50%, -50%)membuat teks dan semua konten lainnya buram pada OS X menggunakan browser webkit. keithclark.co.uk/articles/gpu-text-rendering-in-webkit

Yasha

Cukup gunakan jenis antialiasing yang kamu suka. -webkit-font-smoothing: antialiased;Aku sudah mendapatkannya dari artikel yang kamu posting btw!

Adam Spence

4

Metode pemusatan pilihan saya:

position: absolute;
margin: auto;
width: x%

penempatan elemen blok absolut
margin otomatis
kiri / kanan yang sama, atas / bawah

JSFiddle di sini

vp_arth
sumber

4

Ini bekerja untuk saya:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

Alan
sumber

Ini @Matthias Weiler menjawab 5 tahun kemudian.

aloisdg pindah ke codidact.com

3

Saya tahu saya sudah memberikan jawaban, dan jawaban saya sebelumnya, bersama dengan orang lain yang diberikan, bekerja dengan baik. Tetapi saya telah menggunakan ini di masa lalu dan berfungsi lebih baik pada browser tertentu dan dalam situasi tertentu. Jadi saya pikir saya memberikan jawaban ini juga. Saya tidak "Edit" jawaban saya sebelumnya dan menambahkannya karena saya merasa ini adalah jawaban yang sepenuhnya terpisah dan dua yang saya berikan tidak terkait.

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

Dustin Poissant
sumber

3

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

Burcu AKCAOGLU
sumber

2

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

Dustin Poissant
sumber

2

Solusi ini berfungsi jika elemen memiliki widthdanheight

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="content"></div>
</div>

Luaskan cuplikan

Mo.
sumber

2

solusi dari pertanyaan ini tidak berfungsi untuk kasus saya .. Saya sedang menulis teks untuk beberapa gambar dan saya menyelesaikannya menggunakan ini

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}

<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>

Luaskan cuplikan

Marcogomesr
sumber

1

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

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

    width: 100px;
    height: 100px;

    background: #ccc;
}

Ini dan lebih banyak contoh di sini

sumber

1

Ini adalah trik yang saya temukan untuk mendapatkan DIV yang mengapung tepat di tengah halaman. Benar-benar jelek tentu saja, tetapi bekerja dengan baik

Dots and Dashes

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

Pembersih

Wow, lima tahun berlalu begitu saja, bukan?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

Tuan B
sumber

1

.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

AndreyP
sumber

0

Anda dapat menempatkan gambar dalam div dan menambahkan id id dan memiliki CSS untuk div itu a text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}

Dworvin Vonstrangle
sumber

0

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Luaskan cuplikan

amit bende
sumber

0

Pendekatan sederhana yang berhasil bagi saya untuk memusatkan secara horizontal blok lebar yang tidak diketahui:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Properti perataan teks dapat ditambahkan ke #block ruleset untuk menyelaraskan kontennya secara independen dari perataan blok.

Ini berfungsi pada versi terbaru Firefox, Chrome, IE, Edge dan Safari.

Terence Bandoian
sumber

Bagaimana cara memusatkan elemen yang benar-benar diposisikan di div?

Jawaban:

Solusi Responsif