CSS kullanarak <div>diğerini yatay olarak nasıl ortalayabilirim <div>?

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

Bu CSS'yi iç kısma uygulayabilirsiniz <div>:

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

Tabii ki, ayarlamak gerekmez widthiçin 50%. Kapsayıcıdan daha az herhangi bir genişlik <div>işe yarayacaktır. margin: 0 autoGerçek merkezlenmesini yaptığı iştir.

Internet Explorer 8'i (ve daha yenisini) hedefliyorsanız , bunun yerine bunun olması daha iyi olabilir:

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

İç elemanı yatay olarak ortalayacak ve belirli bir ayar yapmadan çalışacaktır width.

Burada çalışma örneği:

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

İç kısımda sabit bir genişlik ayarlamak istemiyorsanız div, 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ç divkısmı ortalanabilir bir satır içi öğeye dönüştürür text-align.

En iyi yaklaşımlar CSS 3 ile .

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

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

Kullanılabilirliğinize göre box-orient, box-flex, box-direction özellikleri .

Esnek :

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

Alt öğelerin ortalanması hakkında daha fazla bilgi edinin

• Bağlantı 2

• Bağlantı 3

• Bağlantı 4

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

• W3C kutu modeli neden daha iyi kabul ediliyor?

Div'inizin 200 piksel genişliğinde olduğunu varsayalım:

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

Üst öğenin konumlandırıldığından , yani göreli, sabit, mutlak veya yapışkan olduğundan emin olun .

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

https://jsfiddle.net/gjvfxxdj/

İle CSS kalk () , kod daha basit alabilirsiniz:

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

İlke hala aynı; öğeyi ortaya koyun ve genişliği telafi edin.

Bu örneği dikey ve yatay olarak nasıl göstereceğimizi göstermek için oluşturdum align.

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ırdığınızdacenter bile kalacaktır .

Bazı posterler, CSS 3'ün display:box .

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

Tam esneklik için, Esnek Kutu Yerleşimi Modülünü kullanarak CSS 3'te ortalamanın en yeni yolu budur .

Yani basit işaretlemeniz 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, 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>

Eğer flexbox'a için eski sözdizimini kullanın eski tarayıcıları desteklemek için gerekirse burada bakmak için iyi bir yerdir.

Sabit bir genişlik ayarlamak istemiyorsanız ve fazladan kenar boşluğu istemiyorsanız öğenize ekleyin display: inline-block.

Kullanabilirsiniz:

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

Yüksekliği ve genişliği bilinmeyen bir div'ı merkezleme

Yatay ve dikey. Oldukça modern tarayıcılarla (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 da tamir edin .

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

CSS 3'ün kutu hizalama özelliği

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

Set widthve seti margin-leftve margin-rightiçin auto. Yine de bu sadece yatay içindir . Her iki yolu da istiyorsanız, her iki şekilde de yaparsınız. Denemekten korkmayın; hiçbir şeyi kıramayacaksınız gibi değil.

Son zamanlarda display:none;içinde sayfa merkezli olması gereken tablolanmış bir formu olan bir "gizli" div (yani ) ortalamak zorunda kaldı. Gizli div görüntülemek ve daha sonra tablonun otomatik oluşturulan genişliği için CSS içeriğini güncelleştirmek ve ortalamak için kenar boşluğunu değiştirmek için aşağıdaki jQuery kodu yazdım. (Görüntü geçişi bir bağlantıyı tıklatarak tetiklenir, ancak bu kodun görüntülenmesi gerekli değildir.)

NOT: Google beni bu Yığın Taşması çözümüne getirdiğinden ve gizli öğelerin herhangi bir genişliğe sahip olmadığı ve görüntülenene kadar yeniden boyutlandırılamadığı / ortalanamadığı için her şey işe yarayacağından bu kodu paylaşıyorum.

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

Genellikle bunu yapmak mutlak pozisyon kullanmaktır:

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

Dış div'in çalışması için ekstra bir özelliğe ihtiyacı yoktur.

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:Mülkiyet modern tarayıcılar için isteğe bağlıdır, ancak eski tarayıcıları desteği için Internet Explorer Süslemeler Modunda gereklidir.

kullanın:

#outerDiv {
  width: 500px;
}

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

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

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

İşin püf noktası translateX(-50%), #innerelemanı kendi genişliğinin yüzde 50 soluna ayarlıyor . Dikey hizalama için aynı hileyi kullanabilirsiniz.

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

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

Blogunda 'Bilinmeyen Merkezleme' üzerine mükemmel bir yazı yazan Chris Coyier . Birden fazla çözümün bir toplamı. Bu soruya gönderilmemiş bir tane yayınladım. Flexbox çözümünden daha fazla tarayıcı desteğine sahip ve display: table;başka şeyleri kırabilecek olan 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;
}

Son zamanlarda bir yaklaşım buldum:

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

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

Düzgün çalışması için her iki öğenin de aynı genişlikte olması gerekir.

Örneğin, bu bağlantıya ve aşağıdaki snippet'e 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 ebeveynin altında çok fazla çocuğunuz varsa, CSS içeriğiniz kemandaki bu örnek gibi olmalıdır .

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

<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 kemandaki bu örneğe bakın .

Yalnızca yatay merkezleme

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

Konteyner:

• sahip olmalı text-align: center;

İçerik kutusu:

• sahip olmalı 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>

Ayrıca bkz bu Fiddle !

Hem yatay hem de dikey olarak merkezleme

Tecrübelerime göre en iyi yolu bir kutu merkezi hem dikey yatay olarak ortalamanın ek bir kap kullanmak ve aşağıdaki özellikleri uygulamaktır:

Dış konteyner:

• sahip olmalı display: table;

İç konteyner:

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

İçerik kutusu:

• sahip olmalı 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>

Ayrıca bkz bu Fiddle !

En kolay yol:

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

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

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

• .outer -- Tam genişlik
• .inner - genişlik ayarlanmadı (ancak maksimum genişlik belirtilebilir)

Öğelerin hesaplanan genişliğinin sırasıyla 1000 piksel ve 300 piksel olduğunu varsayalım. Aşağıdaki gibi devam edin:

1. .innerİçeri sarın.center-helper
2. Yap .center-helperbir satır içi blok; .inner300 piksel genişlikle aynı boyutta olur .
3. it .center-helper için üst% 50 sağ göre; bu, solu 500 piksel wrt olarak yerleştirir. dış.
4. İtin .inneriçin üst göre sol% 50; bu solu -150 piksel wrt olarak yerleştirir. orta yardımcısı, solunun 500-150 = 350 piksel wrt olduğu anlamına gelir. dış.
5. .outerYatay kaydırma çubuğunu önlemek için taşmayı 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>

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 aynı zamanda #innerdikey olarak hizalanacaktır . İstemiyorsanız, displayve vertical-alignözelliklerini kaldırın ;

İşte en kısa zamanda istediğiniz şey.

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

Metin hizalama: merkez

text-align: centerSatır içi içeriklerin uygulanması satır kutusunun ortasındadır. Ancak iç div varsayılan olarak width: 100%belirli bir genişlik ayarlamanız veya aşağıdakilerden birini kullanmanız gerekir:

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

Kenar boşluğu: 0 otomatik

Kullanmak margin: 0 autobaşka bir seçenektir ve eski tarayıcıların uyumluluğu için daha uygundur. Birlikte çalışır display: table.

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

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

flexbox'a

display: flexbir blok elemanı gibi davranır ve içeriğini flexbox modeline göre düzenler. İle çalışırjustify-content: center .

Lütfen dikkat: Flexbox tüm tarayıcılarla uyumludur, ancak hepsi ile uyumlu değildir. Tarayıcı uyumluluğunun tam ve güncel bir listesi için buraya 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: translateCSS görsel biçimlendirme modelinin koordinat alanını değiştirmenizi sağlar. Bunu kullanarak, ögeler çevrilebilir, döndürülebilir, ölçeklenebilir ve eğrilebilir. Yatay olarak ortalamak için position: absoluteve gerekir left: 50%.

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

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

<center> (Kaldırıldı)

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

#inner {
  display: inline-block;
}

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

display: flexDış bölgeniz için kullanabilirsiniz ve yatay olarak merkeze eklemeniz gerekir.justify-content: center

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

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

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

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

Eh, tüm durumlara uygun 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>

İşte JavaScript snippet'i:

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

Bu yöntem de iyi çalışıyor:

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

İç için <div>, tek koşul onun heightve widthkabınınkinden daha büyük olmaması gerektiğidir.

Bulduğum bir seçenek vardı:

Herkes şunu diyor:

margin: auto 0;

Ama başka bir seçenek daha var. Üst div için bu özelliği ayarlayın. Her zaman mükemmel çalışır:

text-align: center;

Ve bakın, çocuk merkeze git.

Ve son olarak 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 */
}