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>

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>

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 .

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

• Liên kết 2

• Liên kết 3

• Liên kết 4

Và đ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 :

• Tại sao mô hình hộp W3C được coi là tốt hơn?

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 đã tạo ví dụ này để hiển thị cách theo chiều dọc và chiề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.

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

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

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.

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

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 .

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.

Thuộc tính hộp của CSS 3

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

Đặt widthvà đặt margin-leftvà margin-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ì.

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>

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

Sử dụng:

#outerDiv {
  width: 500px;
}

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

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

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 .

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

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.

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 .

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 !

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>

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>

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 displayvà vertical-aligncác thuộc tính;

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

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:

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

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.

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

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

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.

#inner {
  display: inline-block;
}

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

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

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: absolute và left: 50%.

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

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

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

#inner {
  display: inline-block;
}

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

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.

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

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

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ó heightvà widthkhông được lớn hơn các thùng chứa của nó.

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