Jak łatwo wyśrodkować poziomo za pomocą CSS? [duplikat]

 636
Author: cmcginty, 2009-03-06

22 answers

W przypadku nie-Stała szerokość div (tzn. nie wiesz, ile miejsca zajmie div).

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}
<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

Należy pamiętać, że szerokość #yourdiv jest dynamiczna - > będzie rosła i kurczyła się, aby pomieścić tekst w środku.

Możesz sprawdzić zgodność przeglądarki na Caniuse

 687
Author: Tivie,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-29 00:24:07

W większości przeglądarek będzie to działać:

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}
<div class="centre">Some Text</div>

W IE6 musisz dodać kolejny zewnętrzny div:

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="layout">
  <div class="centre">Some Text</div>
</div>
 542
Author: Antony Scott,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-02 22:12:45
margin: 0 auto;

Jak powiedział ck, min-width nie jest obsługiwana przez wszystkie przeglądarki

 51
Author: Russ Cam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:10:45

Tytuł pytania i treść są właściwie inne, więc zamieszczę na to dwa rozwiązania za pomocą Flexbox.

Chyba Flexbox zastąpi / doda do obecnego rozwiązania standardowego do czasu całkowitego zniszczenia IE8 i IE9;)

Sprawdź aktualny tabela zgodności przeglądarki dla flexbox

Pojedynczy element

.container {
  display: flex;
  justify-content: center;
}
<div class="container">
  <img src="http://placehold.it/100x100">
</div>

Wiele elementów, ale środek tylko jeden

Default zachowanie to flex-direction: row, które wyrównuje wszystkie elementy potomne w jednej linii. Ustawienie jej na flex-direction: column pomoże układać linie.

.container {
  display: flex;
  flex-direction: column;
}
.centered {
  align-self: center;
}
<div class="container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </p>
  <div class="centered"><img src="http://placehold.it/100x100"></div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
 32
Author: Manoj Kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-14 10:29:01

CSS, HTML :

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

Twój diagram pokazuje również element poziomu bloku (którym zazwyczaj jest div), a nie element w linii.

Of the top of my head, {[2] } is supported in FF2+/Safari3+ / IE7+. Można to zrobić dla IE6 za pomocą hackety CSS, lub prostego kawałka JS.

 25
Author: sjh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-07 10:36:10
.center {
   margin-left: auto;
   margin-right: auto;
}

Minimalna szerokość nie jest obsługiwana globalnie, ale może być zaimplementowana za pomocą

.divclass {
   min-width: 200px;
}

Następnie możesz ustawić swój div na

<div class="center divclass">stuff in here</div>
 22
Author: cjk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-09-04 17:10:01

Jeśli stare przeglądarki nie są problemem, użyj HTML5 / CSS3. Jeśli tak, zastosuj polyfills i nadal używaj HTML5 / CSS3. Zakładam, że Twój div nie ma tutaj marginesów ani paddingów, ale są one stosunkowo łatwe do uwzględnienia. Kod jest następujący.

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

To co robi to:

  1. Ustaw div względem kontenera;
  2. Ustaw lewą granicę div na 50% szerokości kontenera w poziomie;
  3. tłumaczyć poziomo o 50% z szerokość własna div .
Łatwo sobie wyobrazić ten proces, aby potwierdzić, że divbędzie w końcu wyśrodkowany poziomo. Jako bonus możesz wyśrodkować w pionie BEZ dodatkowych kosztów:
.centered-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Zaletą tego podejścia jest to, że nie musisz robić żadnych sprzecznych z intuicją rzeczy, takich jak rozważanie tekstu div, owijanie go w (często semantycznie bezużyteczny) dodatkowy kontener, lub nadanie mu stałej szerokości, co nie zawsze jest możliwe.

Nie zapomnij przedrostków dostawcy dla transform w razie potrzeby.

 22
Author: wh1t3cat1k,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-02 12:53:24

Powinieneś użyć position: relative i text-align: center na elemencie nadrzędnym, a następnie display: inline-block na elemencie podrzędnym, który chcesz wyśrodkować. Jest to prosty wzorzec projektowy CSS, który będzie działał we wszystkich głównych przeglądarkach. Poniżej znajduje się przykład lub zobacz przykład CodePen.

p {
  text-align: left;
}
.container {
  position: relative;
  display: block;
  text-align: center;
}
/* Style your object */

.object {
  padding: 10px;
  color: #ffffff;
  background-color: #556270;
}
.centerthis {
  display: inline-block;
}
<div class="container">

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>

  <span class="object centerthis">Something Centered</span>

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>
</div>
 7
Author: Joshua Pekera,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-13 20:59:44

Możesz użyć margin: 0 auto na swoim css zamiast margin-left: auto; margin-right: auto;

 6
Author: Zawarudo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-04 10:50:18

Proszę użyć poniższego kodu Twój div będzie w środku

.class-name{
display:block;
margin:0 auto;

}

 4
Author: RiyazAhmed,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-21 09:45:28

Po dziewięciu latach pomyślałem, że nadszedł czas, aby przynieść nową wersję. Oto moje dwa (a teraz jeden) ulubione.

Margines

Ustawić margin na auto. Powinieneś wiedzieć, że sekwencja kierunku to margin: *top* *right* *bottom* *left*; lub margin: *top&bottom* *left&right*

aside{
    display: block;
    width: 50px;
    height: 100px;
    background-color: green;
    float: left;
}

article{
    height: 100px;
    margin: 0 0 0 50px; /* 50px aside width */
    background-color: grey;
}

div{
  margin: 0 auto;
  display:block;
  width: 60px;
  height: 60px;
  background-color: blue;
  color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>           
                <div>The div</div>
        </article>
    </body>
</html>

/ align = "center" bgcolor = "# e0ffe0 " / cesarz chin / / align = center /

Użyj znaczników <center></center> jako owinięcia wokół <div></div>.

Przykład:

aside{
    display:block;
    background-color:green;
    width: 50px;
    height: 100px;
    float: left;
}

center{
    display:block;
    background-color:grey;
    height: 100px;
    margin-left: 50px; /* Width of the aside */
}

div{
    display:block; 
    width: 60px; 
    height: 60px; 
    background-color:blue;
    color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>
            <center>
                <div>The div</div>
            </center>
        </article>
    </body>
</html>
 3
Author: Orry Vandermeulen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-11 02:17:14

Tutaj dodaję poprawną odpowiedź

Możesz użyć tego kodu i dostosować. Tutaj używam 2 blok dzieci.To powinno pokazać środek strony. Możesz użyć jednego lub wielu bloków.

<html>
<head>
<style>
#parent {
    width: 100%;
    border: solid 1px #aaa;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
}

.child {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>

<body>

<div class="mydiv" id="parent">


<div class="child">
Block 1
</div>
<div class="child">
Block 2
</div>

</div>
</body>
</html>
 2
Author: CodeSnippet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-07 19:12:03

.center {
  height: 20px;
  background-color: blue;
}

.center>div {
  margin: auto;
  background-color: green;
  width: 200px;
}
<div class="center">
  <div>You text</div>
</div>

JsFiddle

 2
Author: Lex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-29 08:07:23

Jeśli znasz szerokość div I jest ona stała, możesz użyć następującego css:

margin-left: calc(50% - 'half-of-your-div-width');

Gdzie 'half-of-your-div-width' powinna być (oczywiście) połową szerokości twojego div.

 2
Author: P.Petkov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-01 12:40:08

Jeśli twoje <div> mA position: absolute musisz użyć width: 100%;

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

    #child {
        display: inline-block;
    }
 1
Author: Marcio Mazzucato,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-24 20:36:58

W pliku html piszesz:

<div class="banner">
  Center content
</div>

Twój plik css, który piszesz:

.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
Mi pasuje.
 1
Author: krekto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-23 14:56:27

Użycie margin-left: auto i margin-right: auto może nie działać w pewnych sytuacjach. Oto rozwiązanie, które zawsze będzie działać. Określa się wymaganą szerokość, a następnie ustawia lewy margines na połowę pozostałej szerokości.

    <div style="width:80%; margin-left:calc(10%);">
        your_html
    </div>
 1
Author: azakgaim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-07 15:40:29

Dodaj tę klasę do pliku css to będzie działać idealnie kroki do wykonania:

1) Utwórz ten pierwszy

<div class="center-role-form">
  <!--your div (contrent) place here-->
</div>

2) dodaj to do css

.center-role-form {
    width: fit-content;
    text-align: center;
    margin: 1em auto;
}
 1
Author: Urvashi Bhatt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-29 11:46:38

Najlepszą odpowiedzią na to pytanie jest użycie margin-auto, ale aby go użyć, musisz znać width swojego div w px lub %.

Kod CSS:

div{
    width:30%;
    margin-left:auto;
    margin-right:auto;
}
 0
Author: Ayman EL Ouafi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-15 17:31:12

Używam znaczników Div I span wraz z właściwościami css, takimi jak block, cross-browser inline-block I text-align center, zobacz mój prosty przykład

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <style>
           .block{display:block;}
           .text-center{text-align:center;}
           .border-dashed-black{border:1px dashed black;}
           .inline-block{
                 display: -moz-inline-stack;
                 display: inline-block;
                 zoom: 1;
                 *display: inline;
            }
           .border-solid-black{border:1px solid black;}
           .text-left{text-align:left;}
        </style>
    </head>
    <body>
          <div class="block text-center border-dashed-black">
              <span class="block text-center">
                  <span class="block"> 
        <!-- The Div we want to center set any width as long as it is not more than the container-->
                      <div class="inline-block text-left border-solid-black" style="width:450px !important;">
                             jjjjjk
                      </div> 
                  </span>
              </span>
          </div>
      </body>
   </html>
 0
Author: amachree tamunoemi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-20 02:28:55

Możesz użyć position: relative; a następnie ustawić lewą i górną wartość:

.cenverDiv{
    position:relative;
    left:30%;
    top:0px;
}
 -3
Author: goli55,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-14 11:47:02

Using jQuery:

$(document).ready(function() {
    $(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6
    $(".myElement_container_new").css({// for IE6
        "display" : "block",
        "position" : "relative",
        "margin" : "0",
        "padding" : "0",
        "border" : "none",
        "background-color" : "transparent",
        "clear" : "both",
        "text-align" : "center"
    });
    $(".myElement").css({
        "display" : "block",
        "position" : "relative",
        "max-width" : "75%", // for example
        "margin-left" : "auto",
        "margin-right" : "auto",
        "clear" : "both",
        "text-align" : "left"
    });
});

Lub, jeśli chcesz wyśrodkować każdy element klasą".mielement": {]}

$(document).ready(function() {
    $(".myElement").each(function() {
        $(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6
        $(".myElement_container_new").css({// for IE6
            "display" : "block",
            "position" : "relative",
            "margin" : "0",
            "padding" : "0",
            "border" : "none",
            "background-color" : "transparent",
            "clear" : "both",
            "text-align" : "center"
        });
        $(this).css({
            "display" : "block",
            "position" : "relative",
            "max-width" : "75%",
            "margin-left" : "auto",
            "margin-right" : "auto",
            "clear" : "both",
            "text-align" : "left"
        });
    });
});
 -3
Author: Riccardo Volpe,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-28 23:59:07