Kesinlikle konumlandırılmış eleman div'de nasıl ortalanır?

1078

Penceremin ortasına div(ile position:absolute;) bir eleman yerleştirmem gerekiyor . Ama bunu yaparken sorun yaşıyorum çünkü genişlik bilinmiyor .

Bunu denedim. Ancak genişlik duyarlı olduğundan ayarlanması gerekir.

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

Herhangi bir fikir?

— ish
kaynak

4

Mutlak merkez örneklerinde farklı durumlarda genelleştirilebilecek bir örneğiniz var .

— Mihai8

2

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

Snippet'i genişlet

— bobince
kaynak

76

Muhteşem. Benim için çalıştı! Bir sorunum var: Ortalandığım görüntü oldukça büyüktü, bu dış div'in sayfanın sağ kenarının ötesine geçmesine ve yatay kaydırmaya neden oldu. Ben "sağ" için "sol" css özelliği takas ve şimdiye kadar ekranın sol kenarına gitmek kaydırma neden olmaz çünkü daha iyi çalışır

— BoomShaka

kullanıcı sayfayı aşağı kaydırdıysa, üst kısımda overylay görünür, kaydırma sorununu gidermek için jquery kullanmanın iyi bir fikir olacağını düşünürsünüz

— PUG

1

kaydırma sorunu için bir çözüm olabilir, position: fixedancak yükseklik bindirmeden bilinmiyorsa, bindirme için kaydırma çubuklarının uygulanması gerekecektir

— PUG

3

Bu tekniği kullanırken karşılaştığım ufak bir sorun var. Dış div ekranın% 50'sini kapladığı için, metin% 50 ekran boyutundan daha geniş olduğunda bazı değişiklikler meydana gelir. Dış div "width: 100%" olarak ayarlayıp left özelliğini kaldırarak bunu çözdüm. İç div için, metin hizalamamı merkeze ayarlıyorum. Bu sorunu çözer.

— Nicky L.

3

Yüzde yüksekliği, bu durumda, içeren bloğa göredir <html>. Ancak <html>öğenin heightbelirtilen bir özelliği yoktur, bu nedenle belgedeki tüm içeriğin yüksekliğini alır, bu hiçbir şey değildir çünkü tek içerik kesinlikle konumlandırılmıştır (içerik akışından çıkarılır). Ekleme height: 100%için <html>eleman buna bir fark yaratıyor.

— bobince

1801

Bu benim için çalışıyor:

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

Snippet'i genişlet

— Matthias Weiler
kaynak

36

Ben sadece negatif marjlar mükemmel geçerli CSS olduğunu ve "kirli bir kesmek" olarak görülmemelidir almak istiyorum . Negatif kenar boşlukları W3C kutu modeli spesifikasyonunda belirtilmiştir. Bazı bireyler keyfi olarak bir hack olduğuna karar veriyor gibi görünüyor çünkü a) onlar için cahil ya da b) onları kötü CSS'lerini düzeltmek için kullanıyorlar.

— Joseph Ravenwolfe

58

ortalanacak div'in genişliği ayarlanmalıdır - üzerinde metin bulunan bir düğme ile otomatik olarak çalışmaz.

— Stefan

2

@Joshua Bu, diğer cevap gibi dikey olarak değil, yalnızca yatay olarak ortalanır.

— ygoe

3

Görünüm boyutunu büyütmediği için bu çözümü tercih ediyorum.

— iceydee

13

Çapraz tarayıcı desteği için: widthbunun çalışması için belirli bir değere ayarlanmalıdır. autove 100%öğeyi ortalamaz. display: block;olmalı. position: absolute;bir zorunluluk değil. Tüm değerler çalışır. Üst öğelerin dışında bir öğeye positionayarlanması gerekir static. Ayarlamak leftve rightyapmak 0gereksizdir. margin-left: auto; margin-right: auto;işi yapacak.

— Onur Yıldırım

767

Duyarlı Çözüm

IE8 ve altını desteklemenize gerek yoksa , duyarlı tasarım veya genel olarak bilinmeyen boyutlar için iyi bir çözüm .

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

Kod snippet'ini göster

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

Snippet'i genişlet

İşte bir JS Fiddle

İpucu, dönüşüm öğenin genişliği / yüksekliğine göreli left: 50%iken ana translateöğeye göredir.

Bu şekilde, hem çocuk hem de ebeveyn üzerinde esnek bir genişliğe sahip mükemmel ortalanmış bir elemana sahip olursunuz. Bonus: Çocuk ebeveyninden daha büyük olsa bile bu işe yarar.

Ayrıca bununla dikey olarak ortalayabilirsiniz (ve yine ebeveynin ve çocuğun genişliği ve yüksekliği tamamen esnek olabilir (ve / veya bilinmiyor)):

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

Ön transformekli satıcıya da ihtiyaç duyabileceğinizi unutmayın . Örneğin-webkit-transform: translate(-50%,-50%);

— ProblemsOfSumit
kaynak

26

IE7 desteği artık gerekli olmadığında, bu fiili çözüm olmalıdır. Bu çözüm soldan daha iyidir: 0 / sağ: 0 tekniği, çünkü bu, elemanları tam genişlikte tutarken genişliği korur ve bilinmeyen genişlikteki elemanlar üzerinde çalışır.

— aleemb

51

En iyi cevap, div'in içerdiği kutu çocuktan daha küçükse bu işe yarar.

— Dava

2

@ChadJohnson elbette öyle. webkit-Önerdiğim gibi önek ile deneyin .

— Sorunlar

2

Ah, -webkit hakkındaki notunu kaçırdım. Muhteşem.

— Chad Johnson

3

transform: translateposition: fixedçocuklarda kullanılamaz gibi görünüyor . Kabul edilen cevap bu durumda daha iyi çalışır.

— dmvianna

49

Gerçekten güzel bir yazı .. Sadece birisi tek div etiketi ile yapmak istiyorsa eklemek için istedim o zaman burada çıkış yolu:

Alarak widtholarak 900px.

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

Bu durumda widthönceden bilmek gerekir .

— pratikabu
kaynak

26

"because the width is unknown"... bu soruya cevap vermiyor

— Michel Ayres

15

merhaba @Michel aslında google mutlak div merkezleme ile ilgili bir şey ararken, bu bağlantı ilk bağlantı olarak geliyor. Bu yüzden bu çözümü ekledim, benim gibi biri yukarıdaki çözümü

— arıyorsa

1

Duyarlı tasarım için çok yararlı değil, ancak duyarlı tasarımlar yapmaya başlayana kadar benim için çalıştı. Bu, kesinlikle konumlandırılmış bilinen genişlik elemanlarını ortalamak için geçerli bir cevaptır .

— Sean Kendle

35

Mutlak Merkez

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/

Google Chrome, Firefox ve IE8'de test edildi

Bu yardımcı olur umarım :)

— Ijas Ameenudeen
kaynak

Bu işe yaramaz, lütfen şu kod açıklamasını

— Mark

1

Üzgünüz, bunun işe yarayacağını düşünüyorum, ancak sabit bir yükseklik ve genişlik codepen.io/anon/pen/WwxEYQ

— Mark

31

bu çalışma dikey ve yatay

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

öğeyi üst öğenin merkezine yapmak istiyorsanız, üst öğenin göreli konumunu ayarlayın

 #parentElement{
      position:relative
  }

Düzenle:

dikey merkez için ayarlanan yüksekliği elemanınıza hizalayın. @Raul sayesinde
öğeyi üst öğenin merkezi yapmak istiyorsanız, üst öğenin konumunu göreli olarak ayarlayın

— Mohsen Abdollahi
kaynak

2

Düşey çalışmak için yükseklik eklemeniz gerektiğini düşünüyorum.

— Raul

Bu konumlar, başka bir öğenin merkezine değil, sayfanın ortasına benziyor.

— Günter Zöchbauer

1

@ GünterZöchbauer evet, eğer ebeveynin eleman merkezini yapmak istiyorsanız, ebeveynin akraba konumunu ayarlayın.

— Mohsen Abdollahi

20

Bir çözüm arıyorum Yukarıda yanıtları aldım ve Matthias Weiler yanıtıyla ancak metin hizalama kullanarak içerik merkezli yapabilirim.

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

Chrome ve Firefox ile çalıştı.

— cavila
kaynak

5

"Metin hizalama: merkez" e ihtiyacınız olmadığını düşünüyorum

— Tobias

Bu benim sorunum sabit burada . Teşekkürler!

— Volomike

Ben "text-align: center" gerekli ve bu @ProblemsOfSumit tarafından önerilen çözüm benim metin sarma yapılan işe yaramadı nerede çalıştı.

— Nat

19

Yatay ve dikey olarak da ortalamanız gerekiyorsa:

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

— michal.jakubeczy
kaynak

çok güzel düzeltme teşekkürler

— Stanley Bateswar

15

** SORUMLU ÇÖZÜM **

Div içindeki öğeyi varsayarsak, başka bir div ...

bu çözüm iyi çalışıyor

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

kap herhangi bir boyutta olabilir (pozisyon, olmalıdır)

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

( Div ) öğesi de herhangi bir boyutta olabilir ( kaptan daha küçük olmalıdır )

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

Sonuç böyle görünecek. Kod snippet'ini çalıştırın

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

Snippet'i genişlet

Çok yardımcı buldum

— RealMJDev
kaynak

1

deha. neden diğeri bununla gelmedi.

— mesqueeb

Teşekkür ederim, mutlu kodlama

— RealMJDev

13

Bu bizim için işe yarayan diğer cevapların bir karışımı:

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

— Crashalot
kaynak

Güzel düzeltme teşekkürler adamım!

— Stanley Bateswar

12

Bu sorunun zaten birkaç cevabı olduğunu anlıyorum, ancak mantıklı ve zarif olan hemen hemen tüm sınıflarda çalışacak bir çözüm bulamadım, bu yüzden bir demet ayarladıktan sonra benim almam:

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

Snippet'i genişlet

Bunun söylediği şey bana a top: 50%ve a vermek left: 50%, ardından hem X / Y ekseninde hem de boşluk oluşturmak-50% bir yansıtma alanı yaratmak ”anlamında değere .

Bu nedenle, her zaman bir kutu (4 tarafı vardır) olan bir divın 4 noktasında eşit bir boşluk oluşturur.

Bu irade:

Ebeveynin yüksekliğini / genişliğini bilmek zorunda kalmadan çalışın.
Duyarlı çalışın.
X veya Y ekseninde çalışın. Ya da her ikisi de, benim örneğimde olduğu gibi.
İşe yaramadığı bir durum bulamıyorum.

— Daniel Moss
kaynak

Sorunuzun girdinizle birlikte düzenlenebilmesi için bunun işe yaramadığı bir durum bulursanız lütfen bize bildirin.

— Daniel Moss

dönüştürmek / çevirmek safari belirli bir ölçekte bulanık metin render neden olur

— James Tan

@DanielMoss kullanmamak için herhangi bir neden var translate(-50%,-50%);mı?

— Mark Baijens

12

Kap öğenizin ortasında olmasını istediğiniz mutlak konumlandırılmış öğenin rastgele bilinmeyen genişliğinde çalışır.

gösteri

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

— lowtechsun
kaynak

9

Flex, mutlak konumlandırılmış div'ı ortalamak için kullanılabilir.

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

Kod snippet'ini göster

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

Snippet'i genişlet

— Dhaval Jardosh
kaynak

Ekranımda -Firefox 68.x, sadece hizalanmıyor, mutlak blok göreli bloğun altında görünüyor

— Webwoman

Bunu deneyebilir misin display: -webkit-flex;?

— Dhaval Jardosh

7

Bildiğim kadarıyla, bilinmeyen bir genişlik için bunu başarmak imkansız.

Senaryonuzda bu işe yararsa, kesinlikle% 100 genişlik ve yükseklikte görünmez bir öğe konumlandırabilir ve öğenin içinde margin: auto ve muhtemelen dikey hizalama kullanarak ortalanmasını sağlayabilirsiniz. Aksi takdirde, bunu yapmak için Javascript'e ihtiyacınız olacaktır.

— Pekka
kaynak

"Margin: auto" için +1. Daha önce yatay olarak "kenar boşluğu: 0 otomatik" - "0" dikey kenar boşlukları ve "otomatik" yatay uygulayarak bir div ortalamak için denedim. Ben StackOverflow sayfanın kenarlarında 2 kalın beyaz kenarlık almak için çok üst düzey div için kullandığı şey olduğunu düşünüyorum. Bununla birlikte, CSS kenar boşluğundaki W3Schools sayfası, "Bunun sonucu tarayıcıya bağlıdır" otomatik değerini belirtir - Birçok farklı tarayıcıda kişisel olarak denemedim, bu yüzden gerçekten bu noktaya yorum yapamam (ancak Açıkçası bazılarında hile yapar)

— Steg

1

IE8 bir sorun değilse bilinmeyen bir genişlik (ve yükseklik) için mümkündür. Ayrıntılar için cevabıma bakın.

— ProblemsOfSumit

7

@ Bobince'nin cevabına eklemek istiyorum:

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

Geliştirildi: /// bu, yatay kaydırma çubuğunun ortalanmış div içindeki büyük öğelerle görünmemesini sağlar.

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

— küçük şişe
kaynak

6

Heres bunu yapmak için yararlı bir jQuery eklentisi. Burada bulundu . Sadece CSS ile mümkün olduğunu düşünmüyorum

/**
 * @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
kaynak

bu daha iyi bir yoldur, özellikle de duyarlı tasarımda.

— m4tm4t

Her durumda jQuery kullanılmış olsaydı önemsiz olurdu

— Code Whisperer

8

bu daha iyi bir yol DEĞİLDİR. Mümkün olduğunca CSS kullanmak her zaman daha iyidir. Her eksende CSS ile ve duyarlı sayfalar için bir DIV'yi ortalamak mümkündür. JavaScript'e gerek yok!

— ProblemsOfSumit

1

@yckart ve bu durumda araç CSS'dir.

— ProblemsOfSumit

5

Yukarıdaki Duyarlı Çözümün sass / pusula sürümü:

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

— Adam Spence
kaynak

4

transform: translate(-50%, -50%)webkit tarayıcıları kullanarak OS X'te metin ve diğer tüm içeriği bulanıklaştırır. keithclark.co.uk/articles/gpu-text-rendering-in-webkit

— Yasha

Sadece istediğiniz gibi kenar yumuşatma türünü -webkit-font-smoothing: antialiased;btw yayınladığınız makaleden topladım!

— Adam Spence

4

Tercih ettiğim merkezleme yöntemi:

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

mutlak blok elemanı konumlandırma
otomatik marj
aynı sol / sağ, üst / alt

JSFiddle burada

— vp_arth
kaynak

4

Bu benim için çalıştı:

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

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

— Alan
kaynak

5 yıl sonra @Matthias Weiler cevap.

— aloisdg taşınma codidact.com

3

Zaten bir cevap verdiğimi biliyorum ve önceki cevabım, verilen diğerleriyle birlikte gayet iyi çalışıyor. Ancak bunu geçmişte kullandım ve bazı tarayıcılarda ve bazı durumlarda daha iyi çalışır. Ben de bu cevabı vereceğimi düşündüm. Önceki cevabımı "düzenlemedim" ve eklemedim çünkü bunun tamamen ayrı bir cevap olduğunu ve sağladığım iki konunun birbiriyle ilişkili olmadığını hissediyorum.

HTML:

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

CSS:

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

— Dustin Poissant
kaynak

3

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

— Burcu AKCAOĞLU
kaynak

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
kaynak

2

Bu çözüm, öğenin widthveheight

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

Snippet'i genişlet

— Mo
kaynak

2

bu sorunun çözümü benim durumumda işe yaramadı .. Bazı görüntüler için resim yazısı yapıyorum ve bunu kullanarak çözdüm

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>

Snippet'i genişlet

— Marcogomesr
kaynak

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

Bu ve daha fazla örnek burada

1

Bu, bir DIV'nin tam olarak sayfanın ortasında süzülmesini sağlamak için anladığım bir numara. Gerçekten çirkin, ama hepsi çalışıyor

Noktalar ve çizgiler

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

temizleyici

Vay be beş yıl geçti, değil mi?

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

— Bay B
kaynak

1

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

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

— AndreyP
kaynak

0

Görüntüyü bir div'e yerleştirip bir div kimliği ekleyebilir ve bu div için CSS'nin text-align:center

HTML:

<div id="intro_img">

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

</div>

CSS:

#intro_img {
    text-align:center;
}

— Dworvin Vonstrangle
kaynak

0

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

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

Snippet'i genişlet

— amit bende
kaynak

0

Genişliği bilinmeyen bir bloğu yatay olarak merkezlememde işe yarayan basit bir yaklaşım:

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

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

İçeriğini bloğun hizalamasından bağımsız olarak hizalamak için #block kural kümesine bir metin hizalama özelliği eklenebilir.

Bu, Firefox, Chrome, IE, Edge ve Safari'nin son sürümlerinde çalıştı.

— Terence Bandoian
kaynak