Cách căn giữa theo chiều ngang <div>


4287

Làm thế nào tôi có thể theo chiều ngang tập trung một <div>trong khác <div>sử dụng CSS?

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

13
Trong số những câu trả lời tuyệt vời đó, tôi chỉ muốn nhấn mạnh rằng bạn phải cho "#inner" "chiều rộng", hoặc nó sẽ là "100%", và bạn không thể biết liệu nó đã được căn giữa chưa.
Jony

Joma Tech đưa tôi đến đây
Barbu Barbu

@Barbu Barbu: Theo cách nào? Trong bối cảnh nào?
Peter Mortensen

Câu trả lời:


4726

Bạn có thể áp dụng CSS này vào bên trong <div>:

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

Tất nhiên, bạn không cần phải thiết lập widthđể 50%. Bất kỳ chiều rộng nhỏ hơn chứa <div>sẽ làm việc. Đây margin: 0 autolà những gì làm trung tâm thực tế.

Nếu bạn đang nhắm mục tiêu Internet Explorer 8 (và phiên bản mới hơn), tốt hơn là nên có cái này thay thế:

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

Nó sẽ làm cho trung tâm thành phần bên trong theo chiều ngang và nó hoạt động mà không cần thiết lập cụ thể width.

Ví dụ làm việc ở đây:

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


12
Đối với định tâm dọc tôi thường sử dụng "line-height" (line-height == height). Điều này đơn giản và tốt đẹp nhưng nó chỉ hoạt động với một văn bản nội dung một dòng :)
Nicolas Guillaume

98
Bạn phải sử dụng thẻ! DOCTYPE trên trang html của mình để làm cho nó hoạt động tốt trên IE.
Fabio

15
Lưu ý rằng có thể cần phải thêm "float: none;" cho #inner.
Mert Mertce

15
Bạn cũng đặt lề trên và dưới thành 0, không liên quan. Tốt hơn margin-left: auto; margin-right: autotôi nghĩ.
Emmanuel Touzery

13
Không nhất thiết margin:0 auto: nó có thể là margin: <whatever_vertical_margin_you_need> autothứ hai là lề ngang.
YakovL

1246

Nếu bạn không muốn đặt chiều rộng cố định ở bên trong div bạn có thể làm một cái gì đó như thế này:

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

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

Điều đó làm cho bên trong divthành một yếu tố nội tuyến có thể được tập trung vàotext-align .


13
@SabaAhang cú pháp chính xác cho điều đó sẽ là float: none;và có lẽ chỉ cần thiết vì #inner đã thừa hưởng một floattrong hai lefthoặc righttừ một nơi nào khác trong CSS của bạn.
Doug McLean

8
Đây là một giải pháp tốt đẹp. Chỉ cần ghi nhớ rằng bên trong sẽ thừa hưởng text-align, do đó bạn có thể muốn thiết của nội tâm text-alignđể initialhoặc một số giá trị khác.
pmoleri

giải pháp tốt đẹp tôi nghĩ vậy
simon

381

Cách tiếp cận tốt nhất là với CSS 3 .

Mô hình hộp:

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

Theo khả năng sử dụng của bạn, bạn cũng có thể sử dụng các box-orient, box-flex, box-directionthuộc tính.

Linh hoạt :

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

Tìm hiểu thêm về việc định tâm các yếu tố con

điều này giải thích tại sao mô hình hộp là cách tiếp cận tốt nhất :


25
Hãy chắc chắn rằng bạn đã đọc câu trả lời này trước khi bạn bắt đầu thực hiện giải pháp này.
cimmanon

4
Safari, cho đến bây giờ, vẫn yêu cầu -webkitcờ cho flexbox ( display: -webkit-flex;-webkit-align-items: center;-webkit-justify-content: center;)
Joseph Hansen

Tôi luôn nghĩ rằng sử dụng nhiều mã là thực hành xấu, ví dụ với mã này, tôi tập trung vào div: display: table; lề: tự động; đơn giản và dễ dàng
simon

Có phải tôi hay đoạn mã này không phải là trung tâm
Mike

Vào năm 2020, chúng tôi có thể sử dụng flexbox caniuse.com/#feat=flexbox
tonygatta

251

Giả sử rằng div của bạn rộng 200 pixel:

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

Đảm bảo phần tử cha được định vị , nghĩa là tương đối, cố định, tuyệt đối hoặc dính.

Nếu bạn không biết chiều rộng của div, bạn có thể sử dụng transform:translateX(-50%);thay vì lề âm.

https://jsfiddle.net/gjvfxxdj/

Với CSS calc () , mã có thể đơn giản hơn nữa:


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

Nguyên tắc vẫn vậy; đặt vật phẩm ở giữa và bù chiều rộng.


Tôi không thích giải pháp này vì khi phần tử bên trong quá rộng so với màn hình, bạn không thể cuộn toàn bộ phần tử theo chiều ngang. lề: 0 tự động hoạt động tốt hơn.
Aloso

lề trái: tự động; lề phải: tự động; trung tâm một yếu tố cấp khối
killscreen

Độ rộng mặc định cho hầu hết các thành phần cấp khối là tự động, sẽ lấp đầy khu vực có sẵn trên màn hình. Chỉ là trung tâm đặt nó ở vị trí tương tự như căn lề trái. Nếu bạn muốn nó được căn giữa trực quan, bạn nên đặt chiều rộng (hoặc chiều rộng tối đa mặc dù Internet Explorer 6 trở về trước không hỗ trợ điều này và IE 7 chỉ hỗ trợ nó ở chế độ tiêu chuẩn).
killscreen

228

Tôi đã tạo ví dụ này để hiển thị cách theo chiều dọcchiều ngang align .

Mã về cơ bản là thế này:

#outer {
  position: relative;
}

và ...

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

Và nó sẽ ở lại centerngay cả khi bạn thay đổi kích thước màn hình của bạn.


12
+1 cho phương pháp này, tôi đã định trả lời với nó. Lưu ý rằng bạn phải khai báo chiều rộng trên phần tử bạn muốn căn giữa theo chiều ngang (hoặc chiều cao nếu căn giữa theo chiều dọc). Đây là một lời giải thích toàn diện: codepen.io/shshaw/full/gEiDt . Một trong những phương pháp linh hoạt hơn và được hỗ trợ rộng rãi của các yếu tố định tâm theo chiều dọc và / hoặc chiều ngang.
stvnrynlds

6
Bạn không thể sử dụng phần đệm trong div, nhưng nếu bạn muốn tạo ảo giác, hãy sử dụng đường viền cùng màu.
Squirrl

Tôi nghĩ để phương pháp này hoạt động, bạn cần thiết lập với và chiều cao của div bên trong
Nicolas S.Xu

212

Một số áp phích đã đề cập đến cách CSS 3 đến trung tâm bằng cách sử dụng display:box.

Cú pháp này đã lỗi thời và không nên sử dụng nữa. [Xem thêm bài này] .

Vì vậy, chỉ để hoàn thiện ở đây là cách mới nhất để tập trung vào CSS 3 bằng cách sử dụng Mô-đun bố trí hộp linh hoạt .

Vì vậy, nếu bạn có đánh dấu đơn giản như:

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

... và bạn muốn căn giữa các mục của mình trong hộp, đây là những gì bạn cần trên phần tử cha (.box):

.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 */
}

Nếu bạn cần hỗ trợ các trình duyệt cũ hơn sử dụng cú pháp cũ hơn cho flexbox thì đây là một nơi tốt để tìm.


"Cú pháp đã lỗi thời" nghĩa là gì, nó có bị phản đối không?
Konga Raju

6
Đặc điểm kỹ thuật Flexbox đã trải qua 3 phiên bản chính. Dự thảo gần đây nhất là từ tháng 9 năm 2012, chính thức phản đối tất cả các dự thảo trước đó. Tuy nhiên, hỗ trợ trình duyệt không chính xác (đặc biệt là các trình duyệt Android cũ): stackoverflow.com/questions/15662578/
mẹo

Điều này làm việc cho tôi trong Chrome khi phiên bản của Justin Polie không.
Vern Jensen

Không phải là "justify-content: centre;" cho căn chỉnh dọc và "align-items: centre;" cho sự liên kết ngang?
Wouter Vanherck

3
@WouterVanherck nó phụ thuộc vào flex-directiongiá trị. Nếu đó là 'hàng' (mặc định) - thì justify-content: center; dành cho căn chỉnh ngang (như tôi đã đề cập trong câu trả lời) Nếu đó là 'cột' - thì justify-content: center;dành cho căn chỉnh dọc.
Năng suất

140

Nếu bạn không muốn đặt chiều rộng cố định và không muốn có thêm lề, hãy thêm display: inline-blockvào phần tử của bạn.

Bạn có thể dùng:

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

3
yêu cầu tương tự như hiển thị: block-inline cũng vậy ( quirksmode.org/css/display.html )
montrealmike

Tôi cũng đã sử dụng cái này, nhưng tôi chưa bao giờ gặp phải display: table;trước đây. Nó làm gì?
Matt Cremeens

97

Căn giữa một div có chiều cao và chiều rộng không xác định

Theo chiều dọc và chiều dọc. Nó hoạt động với các trình duyệt hiện đại hợp lý (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera, v.v.)

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

Tinker với nó hơn nữa trên Codepen hoặc trên JSBin .


89

Nó không thể là trung tâm nếu bạn không cho nó một chiều rộng. Nếu không, nó sẽ mất, theo mặc định, toàn bộ không gian ngang.


49
và nếu bạn không biết chiều rộng? Nói vì nội dung là năng động?
gman

chiều rộng tối đa? cái đó thì sao

1
Tôi sử dụng width: fit-content;margin: 0 auto. Tôi nghĩ rằng điều này có thể làm việc với chiều rộng không xác định.
Rick


88

Đặt widthvà đặt margin-leftmargin-rightthành auto. Đó chỉ là chiều ngang . Nếu bạn muốn cả hai cách, bạn chỉ cần làm cả hai cách. Đừng ngại thử nghiệm; nó không giống như bạn sẽ phá vỡ bất cứ điều gì.


62

Gần đây tôi đã phải tập trung vào một div "ẩn" (nghĩa là display:none;) có dạng được gắn trong thẻ cần được căn giữa trên trang. Tôi đã viết mã jQuery sau để hiển thị div ẩn và sau đó cập nhật nội dung CSS thành chiều rộng được tạo tự động của bảng và thay đổi lề để căn giữa nó. (Chuyển đổi hiển thị được kích hoạt bằng cách nhấp vào liên kết, nhưng mã này không cần thiết để hiển thị.)

LƯU Ý: Tôi đang chia sẻ mã này, bởi vì Google đã đưa tôi đến giải pháp Stack Overflow này và mọi thứ sẽ hoạt động ngoại trừ các phần tử ẩn không có bất kỳ chiều rộng nào và không thể thay đổi kích thước / căn giữa cho đến khi chúng được hiển thị.

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


59

Cách tôi thường làm là sử dụng vị trí tuyệt đối:

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

Div bên ngoài không cần thêm bất kỳ sự phù hợp nào để nó hoạt động.


Điều này có thể không hoạt động nếu bạn có các div khác bên dưới div trung tâm.
NoChance

54

Đối với Firefox và Chrome:

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

Đối với Internet Explorer, Firefox và Chrome:

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

Các text-align:bất động sản là không bắt buộc cho các trình duyệt hiện đại, nhưng nó là cần thiết trong trình duyệt Internet Explorer Quirks Mode để hỗ trợ trình duyệt cũ.


5
Không cần tài sản căn chỉnh văn bản. Nó hoàn toàn không cần thiết.
Touhid Rahman

căn chỉnh văn bản thực sự cần thiết để nó hoạt động trong chế độ nhanh của IE, vì vậy nếu bạn không phiền thêm một biểu thức nhỏ để hỗ trợ các trình duyệt cũ hơn hãy giữ nó ở đó. (IE8 với các quy tắc IE8 và quy tắc IE7 đều hoạt động mà không cần căn chỉnh văn bản, vì vậy có thể chỉ có IE6 trở lên mới được quan tâm)
heytools

52

Sử dụng:

#outerDiv {
  width: 500px;
}

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


47

Một giải pháp khác cho việc này mà không phải đặt chiều rộng cho một trong các thành phần là sử dụng transformthuộc tính CSS 3 .

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

Thủ thuật là translateX(-50%)đặt #innerphần tử 50 phần trăm ở bên trái chiều rộng của chính nó. Bạn có thể sử dụng thủ thuật tương tự để căn chỉnh dọc.

Đây là một Fiddle hiển thị căn chỉnh ngang và dọc.

Thông tin thêm có trên Mozilla Developer Network .


2
Người ta cũng có thể cần tiền tố của nhà cung cấp:-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Skippy le Grand Gourou

45

Chris Coyier, người đã viết một bài viết xuất sắc về 'Định tâm không xác định' trên blog của mình. Đó là một loạt các giải pháp. Tôi đã đăng một cái mà không được đăng trong câu hỏi này. Nó có nhiều hỗ trợ trình duyệt hơn giải pháp Flexbox và bạn không sử dụng display: table;có thể phá vỡ những thứ khác.

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

39

Gần đây tôi đã tìm thấy một cách tiếp cận:

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

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

Cả hai yếu tố phải có cùng chiều rộng để hoạt động chính xác.


Chỉ cần đặt quy tắc này cho #inner: #inner { position:relative; left:50%; transform:translateX(-50%); }. Điều này làm việc cho bất kỳ chiều rộng.
Jose Rui Santos

33

Ví dụ: xem liên kết này và đoạn trích dưới đây:

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>

Nếu bạn có nhiều con dưới cha mẹ, vì vậy nội dung CSS của bạn phải giống như ví dụ này trên fiddle .

Nội dung HTML trông như thế này:

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

Sau đó xem ví dụ này trên fiddle .


28

Chỉ định tâm theo chiều ngang

Theo kinh nghiệm của tôi, cách tốt nhất để căn giữa một hộp theo chiều ngang là áp dụng các thuộc tính sau:

Các container:

  • nên có text-align: center;

Hộp nội dung:

  • nên có display: inline-block;

Bản giới thiệu:

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

Xem thêm Fiddle này !


Định tâm cả theo chiều ngang và chiều dọc

Theo kinh nghiệm của tôi, cách tốt nhất để tập trung một hộp cả theo chiều dọc và chiều ngang là sử dụng một container bổ sung và áp dụng các thuộc tính sau:

Các thùng chứa bên ngoài:

  • nên có display: table;

Các thùng chứa bên trong:

  • nên có display: table-cell;
  • nên có vertical-align: middle;
  • nên có text-align: center;

Hộp nội dung:

  • nên có display: inline-block;

Bản giới thiệu:

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

Xem thêm Fiddle này !


27

Cách dễ nhất:

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


1
Như fiddle của bạn lưu ý, #inner phải có chiều rộng được đặt trên nó.
Michael Terry

#outerkhông cần bất kỳ width:100%;như <div>theo mặc định luôn luôn có width:100%. và text-align:centercũng không cần thiết chút nào
Mobarak Ali

27

Nếu độ rộng của nội dung không xác định, bạn có thể sử dụng phương pháp sau . Giả sử chúng ta có hai yếu tố này:

  • .outer -- chiều rộng đầy đủ
  • .inner - không đặt chiều rộng (nhưng có thể chỉ định chiều rộng tối đa)

Giả sử chiều rộng tính toán của các phần tử lần lượt là 1000 pixel và 300 pixel. Tiến hành như sau:

  1. Bọc .innerbên trong.center-helper
  2. Tạo .center-helpermột khối nội tuyến; nó trở thành cùng kích thước với .innerchiều rộng 300 pixel.
  3. Đẩy .center-helper đúng 50% so với cha mẹ của nó; cái này đặt bên trái của nó ở 500 pixel wrt. bên ngoài.
  4. Đẩy .inner50% còn lại so với cha mẹ của nó; cái này đặt bên trái của nó ở -150 pixel wrt. trung tâm trợ giúp có nghĩa là bên trái của nó ở mức 500 - 150 = 350 pixel wrt. bên ngoài.
  5. Đặt tràn vào .outerẩn để ngăn thanh cuộn ngang.

Bản giới thiệu:

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>


26

Bạn có thể làm một cái gì đó như thế này

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

Điều này cũng sẽ sắp xếp #innertheo chiều dọc. Nếu bạn không muốn, hãy xóa displayvertical-aligncác thuộc tính;


25

Đây là những gì bạn muốn một cách ngắn nhất.

NHANH CHÓNG

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

3
Đó là trung tâm nó theo chiều dọc.
Michael Terry

22

Text-align: centre

Áp dụng text-align: centercác nội dung nội tuyến được tập trung trong hộp dòng. Tuy nhiên, vì div bên trong có mặc định, width: 100%bạn phải đặt chiều rộng cụ thể hoặc sử dụng một trong các cách sau:


Ký quỹ: 0 tự động

Sử dụng margin: 0 autolà một tùy chọn khác và nó phù hợp hơn cho khả năng tương thích trình duyệt cũ hơn. Nó hoạt động cùng với display: table.


Hộp linh hoạt

display: flexhoạt động như một phần tử khối và đưa ra nội dung của nó theo mô hình flexbox. Nó hoạt động với justify-content: center.

Xin lưu ý: Flexbox tương thích với hầu hết các trình duyệt nhưng không phải tất cả. Xem ở đây để biết danh sách đầy đủ và cập nhật về khả năng tương thích của trình duyệt.


Biến đổi

transform: translatecho phép bạn sửa đổi không gian tọa độ của mô hình định dạng trực quan CSS. Sử dụng nó, các yếu tố có thể được dịch, xoay, thu nhỏ và nghiêng. Để trung tâm theo chiều ngang, nó yêu cầuposition: absoluteleft: 50%.


<center> (Không dùng nữa)

Thẻ <center>này là sự thay thế HTMLtext-align: center . Nó hoạt động trên các trình duyệt cũ và hầu hết các trình duyệt mới nhưng nó không được coi là một thông lệ tốt vì tính năng này đã lỗi thời và đã bị xóa khỏi các tiêu chuẩn Web.


22

Bạn có thể sử dụng display: flexcho div ngoài của mình và để trung tâm theo chiều ngang, bạn phải thêmjustify-content: center

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

hoặc bạn có thể truy cập w3schools - CSS flex property để có thêm ý tưởng.


21

Flex có phạm vi hỗ trợ trình duyệt hơn 97% và có thể là cách tốt nhất để giải quyết các loại vấn đề này trong vài dòng:

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

21

Chà, tôi đã tìm được một giải pháp có thể phù hợp với mọi tình huống, nhưng sử dụng JavaScript:

Đây là cấu trúc:

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

Và đây là đoạn mã JavaScript:

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

Nếu bạn muốn sử dụng nó theo cách tiếp cận đáp ứng, bạn có thể thêm vào như sau:

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

21

Phương pháp này cũng hoạt động tốt:

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

Đối với bên trong <div>, điều kiện duy nhất là nó heightwidthkhông được lớn hơn các thùng chứa của nó.


19

Một lựa chọn tồn tại mà tôi tìm thấy:

Mọi người nói sử dụng:

margin: auto 0;

Nhưng có một lựa chọn khác. Đặt thuộc tính này cho div cha. Nó hoạt động hoàn hảo bất cứ lúc nào:

text-align: center;

Và xem, con đi trung tâm.

Và cuối cùng là CSS cho bạn:

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

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

công việc căn chỉnh văn bản để căn chỉnh văn bản trong vùng chứa của nó không phải cho vùng chứa của nó với cha mẹ của nó.
Lalit Kumar Maurya

Tôi kiểm tra nó, tôi gặp vấn đề với việc đặt con thành trung tâm, phải khi bạn có nhiều con, nhiều lần hơn lề: 0 câu trả lời phông chữ tự động, nhưng, trung tâm căn chỉnh văn bản, đối với cha mẹ làm cho con này trở thành trung tâm, ngay cả khi chúng là phần tử và không được nhắn tin, kiểm tra và xem điều gì xảy ra
Pnsadeghy

văn bản chỉ căn chỉnh văn bản trung tâm. Bạn đúng vào thời điểm này nhưng khi bạn viết một css container chứa một đứa trẻ có chiều rộng và màu khác nhau thì mã của bạn không hoạt động. Kiểm tra lại !!!!
Lalit Kumar Maurya

Xem ví dụ này jsfiddle.net/uCdPK/2 và cho tôi biết bạn nghĩ gì về nó !!!!!
Lalit Kumar Maurya
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.