web-gelistirme-sc.com

Bir <div> yatay olarak nasıl ortalanır?

CSS kullanarak bir <div> öğesini başka bir <div> içinde nasıl yatay olarak ortalayabilirim? 

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

Bu CSS'yi iç <div> dosyasına uygulayabilirsiniz:

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

Elbette, width öğesini 50% olarak ayarlamanız gerekmez. İçerdiği <div> değerinden küçük herhangi bir genişlik işe yarar. margin: 0 auto, gerçek merkezlemeyi ne yapar?.

IE8 + 'ı hedefliyorsanız, bunun yerine daha iyi olabilir:

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

İç elemanı yatay olarak merkez yapar ve belirli bir width ayarlaması yapmadan çalışır.

Burada çalışan örnek:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

4316
Justin Poliey

İç div iç sabit bir genişlik ayarlamak istemiyorsanız, böyle bir şey yapabilirsiniz:

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

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

Bu, iç div öğesini text-align ile ortalanabilecek bir satır içi öğeye dönüştürür.

1160
Alfred

En iyi yaklaşımlar CSS 3 iledir.

Kutu modeli:

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

Kullanılabilirliğinize göre, box-orient, box-flex, box-direction özelliklerini de kullanabilirsiniz.

Esnek:

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

Alt öğelerin merkezlenmesi hakkında daha fazla bilgi edinin.

Ve bu, kutu modelinin neden en iyi yaklaşım olduğunu açıklar:

329
Konga Raju

Dv'nizin 200px genişliğinde olduğunu varsayalım:

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

Ana elemanın pozisyonunda yani göreceli, sabit, mutlak veya yapışkan olduğundan emin olun.

Div'inizin genişliğini bilmiyorsanız, negatif kenar boşluğu yerine transform:translateX(-50%); komutunu kullanabilirsiniz.

https://jsfiddle.net/gjvfxxdj/

231
nuno_cruz

Bunu exampledikey ve yatay olarakalign' ın nasıl yapıldığını göstermek için yarattım.

Kod temelde şudur:

#outer {
  position: relative;
}

ve...

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

ve ekranınız yeniden boyutlandır olsa bile center içinde kalacaktır.

210
Tom Maton

Bazı posterler, CSS'yi 3 ile display:box kullanarak ortalamanın yollarından bahsetti.

Bu sözdizimi modası geçmiş ve artık kullanılmamalıdır. [Ayrıca bakınız bu gönderi] .

Bu yüzden sadece burada tam olması için ESNEK KUTU D&UUML;ZENI MOD&UUML;L&UUML; kullanarak CSS 3'te ortalamanın en yeni yolu budur.

Öyleyse, aşağıdaki gibi basit bir biçimlendirme varsa:

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

... ve öğelerinizi kutu içinde ortalamak istiyorsanız, işte ana öğede (.box) ihtiyacınız olan şey:

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

Flexbox için eski sözdizimini kullanan eski tarayıcıları desteklemeniz gerekiyorsa, burada aranacak iyi bir yer.

175
Danield

Sabit bir genişlik ayarlamak istemezseniz ve fazladan bir boşluk istemiyorsanız, öğenize display: inline-block ekleyin.

Kullanabilirsiniz:

#element {
    display: table;
    margin: 0 auto;
}
127
Salman Abbas

CSS3'ün kutu hizalama özelliği

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

Genişlik vermezseniz merkezlenemez, aksi takdirde varsayılan olarak tüm yatay alanı alır.

79
gizmo

width ve margin-left ve margin-right öğelerini auto olarak ayarlayın. Bu sadece yatay olsa. Her iki yolu da yapmak istiyorsan, her ikisini de yap. Denemekten korkmayın; Bir şeyi kıracaksın gibi değil.

78
Sneakyness

Bilinmeyen yükseklik ve genişlikte bir div merkezleme

Yatay ve dikey olarak. Oldukça modern tarayıcılarla çalışır (Firefox, Safari/WebKit, Chrome, Internet Explorer 10, Opera vb.)

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

Codepen veya JSBin üzerinde daha fazla çalışın.

77
iamnotsam

Geçenlerde, sayfa üzerinde ortalanması gereken ve içinde tablo şeklinde bir form olan "gizli" bir div (yani, ekran: yok;) ortalamak zorunda kaldım. Gizli div'i görüntülemek ve ardından CSS'yi tablonun otomatik oluşturulan genişliğine güncellemek ve kenar boşluğunu ortalamak için değiştirmek için aşağıdaki jQuery'yi yazdım. (Ekran geçişi, bir linke tıklanarak tetiklenir, ancak bu kodun gösterilmesi gerekli değildi.)

NOT: Bu kodu paylaşıyorum çünkü Google beni bu Yığın Taşması çözümüne getirdi ve gizli öğelerin herhangi bir genişliğine sahip olmaması ve görüntülenene kadar yeniden boyutlandırılması/ortalanması dışında her şey işe yarayacaktı.

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

55
James Moberg

Genelde yaptığım yol mutlak pozisyon kullanıyor:

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

Dış div, bunun çalışması için herhangi bir ekstra özelliğe ihtiyaç duymaz.

49
william44isme

Firefox ve Chrome için:

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

Internet Explorer, Firefox ve Chrome için:

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

text-align: özelliği modern tarayıcılar için isteğe bağlıdır, ancak eski tarayıcı desteği için Internet Explorer Quirks Mode'da gereklidir.

48
ch2o

Bu benim cevabım.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

43
Ankit Jain

Öğelerden biri için bir genişlik ayarlamak zorunda kalmadan bunun için bir başka çözüm CSS 3 transform niteliğini kullanmaktır.

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

İşin püf noktası translateX(-50%), #inner öğesini yüzde 50 kendi genişliğinin soluna ayarlar. Aynı numarayı dikey hizalama için de kullanabilirsiniz.

İşte yatay ve dikey hizalamayı gösteren Fiddle .

Daha fazla bilgi hakkında Mozilla Geliştirici Ağı .

39
Kilian Stinson

Blogunda 'Bilinmeyen Merkezleme' konulu mükemmel yazı yazan Chris Coyier Çoklu çözümlerin bir araya getirilmesi. Bu soruya gönderilmeyen birini gönderdim. Flexbox çözümünden daha fazla tarayıcı desteği var ve başka şeyleri kırabilecek display: table; kullanmıyorsunuz. 

/* 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;
}
38
Willem de Wit

Oyuna oldukça geç kaldığımı fark ettim, ancak bu çok popüler bir soru ve son zamanlarda burada hiçbir yerde bahsetmediğim bir yaklaşım buldum, bu yüzden bunu belgeleyeceğimi düşündüm.

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

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

EDIT: Her iki elemanın da doğru çalışması için aynı genişlikte olması gerekir.

33
BenjaminRH

Örneğin, bu bağlantı ve aşağıdaki kod parçasına bakın:

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>

Bir ebeveyni altında çok çocuğunuz varsa, CSS içeriğiniz şöyle olmalı keman örneği .

HTML içeriği görünümü şöyledir:

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

O zaman şuna bakın keman örneği .

30

En kolay yol:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

25
joan16v

Sadece yatay olarak merkezleme

Tecrübelerime göre, bir kutuyu yatay olarak ortalamanın en iyi yolu aşağıdaki özellikleri uygulamaktır:

Konteyner:

  • text-align: center; olmalıdır

İçerik kutusu:

  • display: inline-block; olmalıdır

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>

Ayrıca bakınız this Fiddle !


Hem yatay hem de dikey olarak merkezleme

Deneyimlerime göre, hem kutularını dikey ve yatay olarak ortalamanın en iyi yolu, ek bir kap kullanmak ve aşağıdaki özellikleri uygulamaktır:

Dış konteyner:

  • display: table; olmalıdır

İç konteyner:

  • display: table-cell; olmalıdır
  • vertical-align: middle; olmalıdır
  • text-align: center; olmalıdır

İçerik kutusu:

  • display: inline-block; olmalıdır

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>

Ayrıca bakınız this Fiddle !

25
John Slegers

İşte istediğin en kısa yol. 

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 % );
}
22
caniz

Böyle bir şey yapabilirsin

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

Bu ayrıca #inner değerini dikey olarak hizalar. İstemiyorsanız, display ve vertical-align özelliklerini kaldırın;

22

İçeriğin genişliği bilinmiyorsa, aşağıdaki yöntemi kullanabilirsiniz . Farz edelim ki bu iki unsur:

  • .outer - tam genişlik
  • .inner - genişlik ayarlanmamış (ancak bir genişlik belirtilebilir)

Elemanların hesaplanan genişliğinin sırasıyla 1000px ve 300px olduğunu varsayalım. Aşağıdaki şekilde devam edin:

  1. .inner içine .center-helper içine kaydırın
  2. .center-helper bir satır içi blok yapın; 300dk genişliğinde .inner ile aynı boyutta olur.
  3. Ebeveynine göre .center-helper% 50 doğru itin; bu solu 500px wrt'de bırakıyor. dış.
  4. Veliğine göre .inner% 50 sola itin; bu solu -150px wrt değerine yerleştirir. sol ortadaki yardımcı, 500 - 150 = 350px ağırlığında. dış.
  5. Yatay kaydırma çubuğunu önlemek için .outer 'deki taşma özelliğini gizli olarak ayarlayın.

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>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}
21
Salman A

Metin hizalama: orta

text-align: center uygulandığında satır içi içerikler satır kutusunda ortalanır. Ancak, dahili div varsayılan olarak width: 100% özelliğine sahip olduğundan, belirli bir genişlik belirlemeniz veya aşağıdakilerden birini kullanmanız gerekir:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Marj: 0 otomatik

margin: 0 auto kullanmak başka bir seçenektir ve eski tarayıcı uyumluluğu için daha uygundur. display: table ile birlikte çalışır.

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Flexbox'a

display: flex bir blok elemanı gibi davranır ve içeriğini flexbox modeline göre düzenler. justify-content: center ile çalışır.

Lütfen dikkat: Flexbox, çoğu tarayıcıyla uyumludur, ancak hepsiyle uyumlu değildir. Tarayıcı uyumluluğunun eksiksiz ve güncel bir listesi için burada bölümüne bakın.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


Dönüştürmek

transform: translate , CSS görsel formatlama modelinin koordinat alanını değiştirmenize izin verir. Kullanarak, elemanlar çevrilebilir, döndürülebilir, ölçeklendirilebilir ve eğriltilebilir. Yatay olarak ortalamak için position: absolute ve left: 50% gerekir.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>


<center> (Kullanımdan Kaldırıldı)

<center> etiketi, text-align: center için HTML alternatifidir. Eski tarayıcılarda ve yenilerinin çoğunda çalışır, ancak bu özellik eski olduğundan ve Web standartlarından çıkarıldığından iyi bir uygulama olarak kabul edilmez.

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

21
Paolo Forgia

Şey, belki tüm durumlara uyacak bir çözüm bulmayı başardım, ancak JavaScript kullanıyor:

İşte yapı:

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

Ve işte JavaScript pasajı:

$(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);
  })
});

Duyarlı bir yaklaşımla kullanmak istiyorsanız, aşağıdakileri ekleyebilirsiniz:

$(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);
  })
});
19
Miguel Leite

Dış div'iniz için display: flex kullanabilirsiniz ve yatay olarak ortalamak için justify-content: center eklemelisiniz

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

veya daha fazla fikir için w3schools - CSS flex Property adresini ziyaret edebilirsiniz.

19
Milan Panigrahi

Bulduğum bir seçenek vardı:

Herkes kullanmak diyor:

margin: auto 0;

Ancak başka bir seçenek var. Bu özelliği ana div için ayarlayın. Her zaman mükemmel çalışır.

text-align: center;

Ve bakın, çocuk merkeze gider.

Ve sonunda sizin için CSS:

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

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

Flex,% 97'den fazla tarayıcı desteği kapsamına sahip ve bu tür sorunları birkaç satırda çözmenin en iyi yolu olabilir:

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

Bu yöntem aynı zamanda sadece iyi çalışıyor:

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

İç <div> için, tek koşul, height ve width öğelerinin kaplarınınkinden daha büyük olmaması gerekir.

18
Billal Begueradj

İle uğraşmayı deneyin 

margin: 0 auto;

Metninizi de ortalamak istiyorsanız, kullanmayı deneyin:

text-align: center;
17
user1817972

Eğer biri merkez için bir jQuery çözümü isterse bu divleri hizalayın:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
17
sarath

basitçe flexbox şöyle kullanabilirsiniz:

#outer {
  display: flex;
  justify-content: center
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Tüm tarayıcı desteği için Autoprefixer uygulayın:

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

VEYA ELSE

transform kullan :

#inner {
      position: absolute;
      left: 50%;
      transform: translate(-50%)
    }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

autoprefixer ile:

#inner {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%)
}
9
Shashin Bhayani

CSS 3:

Alt öğeleri eşit olarak yatay olarak dağıtmak için ana kabın üzerinde aşağıdaki stili kullanabilirsiniz:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

A Nice DEMO / justify-content için farklı değerler hakkında.

 Enter image description here

CanIUse: Tarayıcı-Uyumluluk

Dene!:

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

7
Legends

İç div'e inline stilini uyguladım. Bunu kullan. 

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
7
aamirha
#inner {
    width: 50%;
    margin: 0 auto;
}
6
anand jothi

Bunu CSS Flexbox kullanarak elde edebilirsiniz. Her şeyin çalışmasını sağlamak için ana öğeye 3 özellik uygulamanız yeterlidir.

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

Aşağıdaki koda bir göz atın, bu özellikleri daha iyi anlamanızı sağlayacaktır.

CSS Flexbox hakkında daha fazla bilgi edinin

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

6
Saurav Rastogi

Geçenlerde bulduğum güzel şey, line-height + vertical-align ve 50% left trick'inin karıştırılmasıyla, saf CSS kullanarak hem yatay hem de dikey olarak dinamik bir boyutta bir kutu içinde center kullanabilirsiniz. 

Modern tarayıcılarda test edilen ve (ve inline-block) spans kullanmanız gerektiğini unutmayın. IE8 .HTML:

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS:

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

Buradaki örneğe bakın

6
Josh Mc

#inner div için aşağıdaki CSS'ye ne dersiniz:

#inner {
  width: 50%;
  margin-left: 25%;
}

Bu CSS'yi çoğunlukla divs merkezlemek için kullanıyorum.

5
Rajesh

Basitleştir!

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
4
Hassan Siddiqui

Bir div'i bir divde ortala

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}
<div class="outer">  
  <div class="inner">Foo foo</div>
</div>

3
antelove

Sadece en basit çözümü kullanıyorum, ancak tüm tarayıcılarda çalışıyor:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>
3
Gerald Goshorn

Kullanın:

<div id="parent">
  <div class="child"></div>
</div>

Stil:

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

Yatay olarak ortalamak istiyorsanız, aşağıdaki gibi yazmalısınız:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
3
Руслан

CSS 3 flexbox kullanarak mümkündür. Flex kutusunu kullanırken iki yönteminiz var.

  1. Üst display:flex; öğesini ayarlayın ve üst öğenize {justify-content:center; ,align-items:center;} özelliklerini ekleyin.

#outer{
  display: flex;
  justify-content: center;
  align-items: center;
  }
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

  1. Üst display:flex öğesini ayarlayın ve çocuğa margin:auto; ekleyin.

#outer{
  display: flex;
}
#inner{
  margin: auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

3
Dream Hunter

Ayrıca, mutlak konumlandırma kullanılarak yatay ve dikey olarak ortalanabilir, şöyle:

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
3
Agu Dondo
.outer
{
  background-color: rgb(230,230,255);
  width 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}
<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>
3
pavelbere

Flexbox'ı kullanabilirsiniz.

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

Bu link hakkında daha fazla bilgi edinebilirsiniz: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3
Cyan Baltazar

Calc yönteminden kimsenin bahsetmediğini fark ettiğim için bunu cevaplamak istedim. Kullanım, merkezlediğiniz div içindir, genişliğini biliyorsanız, diyelim ki 1200 piksel.

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

Bu yüzden temelde bilinen genişliğin yarısı% 50 eksi bir sol kenar ekleyecektir.

2
serdarsenay

Yaygın olarak kullanılan ve birçok tarayıcıda eskileri de içeren - en iyi bilinen yöntem, aşağıdaki gibi margin işlevini kullanmaktır:

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}
<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

Nasıl çalıştığını görmek için kodu çalıştırın; ayrıca, bu şekilde merkezlemeye çalıştığınızda CSS'inizde unutamayacağınız 2 önemli şey vardır: margin: 0 auto;, div merkezini istediğiniz gibi yapar, ayrıca çocuğun width unutma , aksi takdirde beklendiği gibi ortalanmayacak! 

2
Alireza

Bunu gerçekten kolayca gerçekleştirmek için FLEXBOX kullanabiliriz:

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

Bir div'i bir div içinde ortalayın HORIZONTALLY:

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

enter image description here

Bir div'i bir div içinde ortalayın.

#outer { 
  display: flex;
  align-items: center;
    }

enter image description here

Ve, div dikey ve yatay tamamen ortalamak için:

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

enter image description here

Umarım bazıları için yardımcı oldu. Mutlu Kodlama!

2
Appy Sharma

2019 itibariyle bu soru hala çok fazla isabet alıyor, bu yüzden çok basit ve çapraz tarayıcı yatay merkeze cevap bu kuralı üst öğeye uygulamak:

.parentBox {
 display: flex;
 justify-content: center
}
2
Ady Ngom

Burada, flexbox kullanarak yatay olarak merkezleme ve iç kabına genişlik belirtmeden başka bir yol var. Fikir, iç içeriği sağdan ve soldan itecek sahte unsurları kullanmaktır.

Sözde eleman üzerinde flex:1 kullanmak, kalan alanları doldurmalarını ve eşit boyutta olmalarını sağlayacak ve iç kap ortalanacaktır.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Aynı şekilde dikey hizalama için de aynı durumu düşürebiliriz;

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

2
Temani Afif

Bu, iç div'inizi yatay ve dikey olarak merkezleştirir:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

Yalnızca yatay hizalama için değiştirin

margin: 0 auto;

ve dikey, değişim

margin: auto 0;
1
Shivam Chhetri

CSS

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

HTML

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

Tüm cevapları okuduktan sonra tercih ettiğim yanıtı görmedim. Bu, bir elemanı başka bir şekilde nasıl merkezleyeceğinizdir. 

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

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

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}
1
Mardok

Bu kodu ekleyebilirsiniz:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Rafiqul Islam

Koşullarınıza bağlı olarak, en basit çözüm şunlar olabilir:

margin:0 auto; float:none;
1
Justin Munce

En kolay cevap margin ekle: auto; iç tarafa.

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

css kodu

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

kodenimi kontrol et link http://codepen.io/feizel/pen/QdJJrK

enter image description here

1
Faizal Munna

İçindeki width için div verin ve CSS özelliğine margin:0 auto; ekleyin.

1
Mr.Pandya

Kullanın:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
1
SUNIL KUMAR E.U

Evet, bu yatay hizalama için kısa ve temiz koddur. Umarım bu kodu seversin.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
1
Banti Mathur

Aşağıdaki kodu kullanın.

HTML

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

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
1
Faizal

Bu soruyu cevaplamak için biraz geç kaldığımı biliyorum ve her bir cevabı okumak için canımı sıkmadım, bu yüzden yinelenebilir. İşte benim alımım :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
1

Bu kodu kullan:

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
1
Husain Ahmed

Flex-box cadı kullanarak satın alabilirsiniz bugünlerde iyi bir tekniktir .. .. Flex-box kullanmak için ebeveyninize veya display: flex; div öğenize align-items: center; ve #outer vermelisiniz. Kod şöyle olmalı:

#outer {
  display: flex;
  align-items: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Bu, çocuğunuzu veya #inner div'yi yatay olarak ortalamalıdır. Fakat aslında herhangi bir değişiklik göremezsiniz. #outer div'mizin yüksekliği veya başka bir deyişle, yüksekliği otomatik olarak ayarlandığından, tüm alt öğeleriyle aynı yüksekliğe sahip olur. Bu nedenle, biraz görsel tasarımdan sonra, sonuç kodu şöyle olmalıdır:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Gördüğünüz gibi #inner div artık ortalanmış durumda. Flex-box, CSS ile elementleri yatay veya dikey yığınlarda konumlandırmanın yeni yöntemidir ve global tarayıcı uyumluluğunun% 96'sına sahiptir. Yani kullanmakta özgürsünüz ve Flex-box ziyareti CSS-Tricks makale hakkında daha fazla bilgi edinmek istiyorsanız, bence Flex-box'ı kullanmayı öğrenmek için en iyi yer burası.

1
Morteza Sadri

<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>

1
Qmr

Bu çok basit.

Sadece iç div'e ne genişlik vermek istediğinize karar verin ve aşağıdaki CSS'yi kullanın.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}
1
Gaurav Aggarwal

Bu kesinlikle #inner'nuzu hem yatay hem de dikey olarak ortalar. Bu, tüm tarayıcılarda da uyumludur. Sadece nasıl merkezlendiğini göstermek için ekstra stiller ekledim.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

Ama elbette sadece yatay olarak hizalanmasını istiyorsanız, Bu size yardımcı olabilir.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

1
Mark Salvania

Bir kod satırı kullanabilirsiniz, sadece text-align:center.

İşte bir örnek:

#inner {
  text-align:center;
  }
<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

1
Yahya Essam

Yapabileceğiniz en kolay yollardan biri display: flex kullanmaktır. Dış div'in sadece ekran esnekliğine sahip olması ve içinin yatay hale getirilmesi için margin: 0 auto'a ihtiyacı var.

Dikey olarak ortalamak ve sadece bir div'i başka bir div içinde ortalamak için lütfen aşağıdaki .inner sınıfının yorumlarına bakınız.

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}
<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

1
drewkiimon
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}
1
Majid Sadr

En kolay yollardan biri ...

<!DOCTYPE html> 
<html>
 <head>
    <style>
        #outer-div {
        width: 100%; 
        text-align: center;
        background-color: #000 
        }
        #inner-div {
        display: inline-block; 
        margin: 0 auto;
        padding: 3px;
        background-color: #888
        }
    </style>
 </head>
 <body>
    <div id ="outer-div" width="100%">
        <div id ="inner-div"> I am a easy horizontally centered div.</div>
    <div>
 </body>
</html>
1
Asmit

Üzgünüm ama 1990'lardaki bu bebek benim için çalıştı.

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

Bu günah için cehenneme mi gideceğim?

1
Heitor

Çeşitli projelerimde kullandığım en iyisi 

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

keman bağlantısı

1
Jaison

Herhangi bir öğeyi üstüne karşı dikey ve yatay olarak merkeze izin veren bir sonraki CSS sınıfını kullanabiliriz:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
Elias MP

HTML:

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

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

0
Fahad Uddin

En iyi yol, ekran tablosuyla (dış) bir div'den sonra gelen ve iç div (tablo-hücre ekranlı) ve yerleştirilen iç divde kullandığınız her etiket için dikey hizalamayı ayarlayan tablo hücre ekranını (iç) kullanmaktır. div veya sayfanın ortasında.

Not: dışa belirli bir yükseklik ayarlamanız gerekir

Göreceli ya da mutlak bir konum olmadan bilmenin en iyi yoludur ve her tarayıcıda aynı şekilde kullanabilirsiniz.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

0
hossein ghaem

Birden fazla sarmalayıcı ve/veya otomatik kenar boşluğu yerine, bu basit çözüm benim için işe yarar:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Div'i görünümün ortasına (dikey ve yatay) yerleştirir, boyut için boyutlar ve ayarlar, arka plan görüntüsünü ortalar (dikey ve yatay), metni ortalar (yatay) ve div'i görünümde ve içeriğin üstünde tutar. Basitçe HTML body içine yerleştirin ve keyfini çıkarın.

0
Cees Timmerman

Bunu dene:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}
0
Ajay Gupta

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

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

Bu kodda, elemanın genişliğini siz belirlersiniz.

margin-left ile benzer buldum, ancak left de olabilir.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}
0
iorgu

Aynı büyüklükteki #inner değerine sahip başka bir div ekleyebilir ve% -50 (#inner genişliğinin yarısı) ve #inner% 50 ile sola taşıyabilirsiniz. İngilizcem için üzgünüm

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

#inner > div {
  position: relative;
        left: -50%;
  }
<div id="outer">  
  <div id="inner"><div>Foo foo</div></div>
</div>
0
user204580

İç divinize CSS ekleyin. margin: 0 auto değerini ayarlayın ve genişliğini dış div'in genişliği olan% 100'den az olarak ayarlayın.

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

Bu istenen sonucu verecektir.

0
Joseph

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

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

Sadece basitçe Margin:0px auto:

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

0
Sankar

Üst div'e text-align:center; ekleyin 

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

veya 

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

0
Friend

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

0
Galarist

Dv'yi merkezlemenin ana özellikleri gereksinimlere göre margin: auto ve width: şeklindedir:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
0
Anu
div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

div statik bir şekilde kullanıyorsanız normal bir şey için

div'nin ebeveyni için mutlak olduğu durumlarda, div'nin merkezlenmiş olmasını istiyorsanız buradaki örnek:

.parentdiv{
   position:relative;
   height:500px;
}

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}

Bunu farklı şekilde yapabilirsiniz. Aşağıdaki örneklere bakınız:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}
0

Bunu dene:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}
0
hossein ketabi

Her şeyden önce: İkinci div için bir genişlik vermeniz gerekir:

Örneğin:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

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

Bir genişlik vermezseniz, çizginin tüm genişliğini alacağını unutmayın.

0
user3968801