Jak wyrównać a do środka (poziomo/szerokość) strony [duplikat]

Question

Jak wyrównać a do środka (poziomo/szerokość) strony [duplikat]

To pytanie ma już odpowiedź tutaj:

Jak wyśrodkować poziomo
? 90 odpowiedzi
Mam znacznik div z width ustawiony na 800px . Gdy szerokość przeglądarki jest większa niż 800px, nie powinna rozciągać div, ale powinna doprowadzić ją do środka strony.

720

html css alignment center

Author: Sunil Garg, 2009-06-05

Source

27 answers

position: absolute następnie top:50% i left:50% umieszcza górną krawędź w pionowym środku ekranu, a lewą krawędź w poziomym środku, następnie dodając margin-top do ujemnej wysokości div tj. e -100 przesuwa ją powyżej o 100, podobnie dla margin-left. To dostaje div dokładnie na środku strony.

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}

<div id="outPopUp"></div>

285

Author: Summo,
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-08-18 14:11:27

Nowoczesny Flexbox rozwiązanie jest drogą do wejścia/od 2015 roku. justify-content: center służy do wyrównania zawartości do środka elementu nadrzędnego.

HTML

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

CSS

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
}

Wyjście

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}

<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>

56

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
2018-07-01 21:49:30

Chcesz wyśrodkować go pionowo czy poziomo? Powiedziałeś, że podałeś height do 800px i chciałeś, aby div nie rozciągał się, gdy width jest większy niż to...
Aby wyśrodkować poziomo, możesz użyć atrybutu margin: auto; w css. Należy również upewnić się, że elementy body i html nie mają marginesu ani wypełnienia:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }

55

Author: Tomas Lycken,
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-01-09 19:15:29

Aby działał poprawnie również w Internet Explorerze 6 musisz to zrobić w następujący sposób:

HTML

<body>
    <div class="centered">
        centered content
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}

36

Author: Kevin Dungs,
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
2012-08-20 19:23:55

<div></div>

div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

31

Author: Mohammad,
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-02-04 12:15:48

Możesz również użyć tego w następujący sposób:

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>

25

Author: RajeshKdev,
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-03-29 22:41:23

Po prostu użyj znacznika środkowego tuż za znacznikiem body i zakończ znacznik środkowy tuż przed zakończeniem body

<body>
<center>
........your code here.....
</center>
</body>

To działało dla mnie ze wszystkimi przeglądarkami, które wypróbowałem

14

Author: Bharat Chhatre,
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
2012-05-11 11:44:51

Dodaj tę klasę do div, który ma być wyśrodkowany (który powinien mieć ustawioną szerokość):

.marginAutoLR
{
    margin-right:auto;
    margin-left:auto;
}

Lub dodaj rzeczy marginesu do klasy div, jak to:

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}

12

Author: Taylor Brown,
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-03-31 13:36:07

Można to łatwo osiągnąć za pomocą flex container.

.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}

Preview Link

11

Author: Roy,
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-08-28 18:17:16

Użyj właściwości css flex: http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* centerized */
  display: box;
  flex-align: center;
  flex-pack: center;
}

10

Author: ,
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
2013-12-28 15:45:05

Niektóre inne wcześniejsze konfiguracje ze starszego kodu, które uniemożliwią centrowanie strony div L & R to: 1) inne klasy ukryte w zewnętrznych linkach do arkusza stylów. 2) inne klasy osadzone w czymś takim jak img(jak w przypadku starszych zewnętrznych formatów drukowania CSS). 3) kod legendy z identyfikatorami i / lub klasami będzie w konflikcie z nazwaną klasą div.

6

Author: Dennis Struck,
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
2012-05-16 17:20:32

Centrowanie bez podania szerokości div:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

To jest coś jak <center> tag robi, z wyjątkiem:

wszystkie bezpośrednie elementy childs inline (np. <h1>) z {[1] } będzie również umieszczony na środku
inline-block element może mieć różny rozmiar (comapred to display:block setting) zgodnie z ustawieniami przeglądarki

5

Author: Igor Ivancha,
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-02-04 11:53:02

body, html{
    display:table;
    height:100%;
    width:100%;
}
.container{
    display:table-cell;
    vertical-align:middle;
}
.container .box{
    width:100px;
    height:100px;
    background:red;
    margin:0 auto;

}

Http://jsfiddle.net/NPV2E/

"width:100%" dla tagu "body" to tylko na przykład. W prawdziwym projekcie możesz usunąć tę właściwość.

4

Author: Andrei Gordiichuk,
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
2013-11-19 16:09:45

Jeśli masz jakąś regularną treść, a nie tylko jedną linijkę tekstu, więc jedynym możliwym powodem, który znam, jest obliczenie marginesu.
Oto przykład:

HTML

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.common {
  border: 1px solid black;
}

#supercontainer {
  width: 1200px;
  background: aqua;
  float: left;
}

#middlecontainer {
  float: left;
  width: 104px;
  margin: 0 549px;
}

#container {
  float: left;
}

#first {
  background: red;
  height: 102px;
  width: 50px;
  float: left;
}

#second {
  background: green;
  height: 50px;
  width: 50px;
}

#third {
  background: yellow;
  height: 50px;
  width: 50px;
}

Więc #supercontainer jest Twoim "whole page" A width jest 1200px.
#middlecontainer jest div z treścią Twojej strony; jest width 102px. W przypadku, gdy width zawartości jest znana, musisz podzielić rozmiar strony na 2 i podbudować od wyniku połowę zawartości width:
1200 / 2 - (102 / 2) = 549;

Tak, widzę również, że to jest DER GROSSE fail CSS.

4

Author: rodnower,
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-02-04 11:46:34

Użyj justify-content i align-items, aby wyrównać poziomo i pionowo div

Https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}

<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

4

Author: JFathi,
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-11-03 18:30:08

To działa również w IE, Auto marginesy nie.

.centered {
    position:           absolute;
    display:            inline-block;
    left:           -500px;
    width:          1000px;
    margin:             0 50%;
}

3

Author: Glen,
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
2012-04-09 20:02:04

Div wyśrodkowane pionowo i poziomo wewnątrz rodzica bez ustalania rozmiaru zawartości

Zobacz Ten przykład (kliknij) . Bardzo prosty i działa również na elastycznych wysokościach. Idealny, jeśli nie masz zadowolenia ze stałej wysokości.

I tutaj (Kliknij) jest ładny przegląd z innymi rozwiązaniami.

I tutaj (Kliknij) kolejny przykład z rozwiązaniem elastycznej szerokości ze słynnym trikiem -50%

3

Author: Wilt,
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:18:25

Proste http://jsfiddle.net/8pd4qx5r/

html {
  display: table;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
}

.content {
  margin: 0 auto;
  width: 260px;
  text-align: center;
  background: pink;
}

3

Author: Igor Ivancha,
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-02-04 11:47:39

Użyj poniższego kodu do wyśrodkowania pola div:

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

<div class="box-content">
</div>

3

Author: Santosh Khalse,
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-03-29 22:50:53

.middle {
   margin: auto;
   text-align: center;
}

1

Author: KBH,
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-18 17:51:30

Jeśli zawartość centrum jest głęboko wewnątrz innych div to tylko margin może cię uratować. Nic więcej. Stoję z tym zawsze, gdy nie używam frameworka takiego jak Bootstrap.

1

Author: Nurul Akter Towhid,
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-10-25 22:07:25

<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>

Jeśli chcesz zmienić pozycję pionową, zmień wartość 250 i możesz uporządkować zawartość zgodnie z potrzebami. Nie ma potrzeby podawania szerokości i innych parametrów.

1

Author: Aashutosh Shrivastava,
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-03-29 22:49:37

W moim przypadku rozmiar ekranu telefonu jest nieznany, oto co zrobiłem.

HTML

<div class="loadingImg"></div>

CSS

.loadingImg{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999999;
    border:0;
    background: url('../images/loading.gif') no-repeat center;
    background-size: 50px 50px;
    display: block;
    margin: 0 auto;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

JS (zanim pokażesz ten DIV)

$(".loadingImg").css("height",$(document).height());     
$(".loadingImg").css("width",$(document).width());     
$(".loadingImg").show();

1

Author: Edye Chan,
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-21 04:02:15

<parent>
 <child>
 </child>
</parent>

Rodzic { pozycja: względna } dziecko { pozycja: absolutna, pozostało: 50%, transform: translateX(-50%) }

1

Author: Levon,
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-08-17 21:12:28

Dość stare pytanie z wieloma odpowiedziami, ale z jakiegoś powodu żadna z nich nie zadziałała na mnie naprawdę. To jest to, co działało dla mnie i działa również w przeglądarce:

.center {
    text-align: center;
    height: 100%;
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
}

0

Author: Osei-Bonsu Christian,
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-10-29 08:13:23

Pobierz szerokość ekranu / align = "left" / % Ustaw margines w prawo 25% w ten sposób zawartość pojemnika będzie znajdować się pośrodku . przykład: załóżmy, że szerokość kontenera = 800px;

div class='container' width='device-width' id='updatedContent'> 
<p id='myContent'></p
<contents></contents>
<contents></contents>
</div>
if($("#myContent").parent===$("updatedContent"))
{
$("#myContent").css({
'left':'-(device-width/0.25)px';
'right':'-(device-width/0.225)px';
});
}

0

Author: mark dibe,
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-05-25 19:55:26

score 969 · Accepted Answer

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

969

Author: AgileJon,
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
2012-03-07 16:48:20