Làm cách nào để căn giữa theo chiều ngang <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 div bên trong thành một thành phần nội tuyến có thể được căn giữa với text-align.

Các 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%;
}

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

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 200px:

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

Đảm bảo phần tử cha là định vị tức 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/

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

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ẽ ở trong center ngay cả khi bạn tá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, để 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 đây 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-block vào thành phần của bạn.

Bạn có thể dùng:

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

Thuộc tính hộp căn chỉnh của CSS3

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

Nó không thể được căn giữa nếu bạn không cho nó một chiều rộng, nếu không nó sẽ lấy, theo mặc định toàn bộ không gian ngang.

Đặt width và đặt margin-left và margin-right thành auto. Đó là chỉ dành cho ngang , mặc dù. 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ì.

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 .

Gần đây tôi đã phải căn giữa một div "ẩn" (nghĩa là hiển thị: none;) có dạng được gắn trong thẻ cần được căn giữa trên trang. Tôi đã viết jQuery sau đây để hiển thị div ẩn và sau đó cập nhật 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 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>

Thuộc tính text-align: là tùy chọn cho các trình duyệt hiện đại, nhưng nó cần thiết trong Chế độ Quirks của Internet Explorer để hỗ trợ các trình duyệt cũ.

Đây là câu trả lời của tôi.

#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 thuộc tính CSS 3 transform.

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

Thủ thuật là translateX(-50%) đặt phần tử #inner 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à 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 đăng xuất sắc trên 'Định tâm trong ẩn số' 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ó thêm hỗ trợ trình duyệt sau đó là 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;
}

Tôi nhận ra rằng tôi khá muộn với trò chơi, nhưng đây là một câu hỏi rất phổ biến và gần đây tôi đã tìm thấy một cách tiếp cận mà tôi chưa thấy được đề cập ở bất cứ đâu ở đây, vì vậy tôi nghĩ rằng tôi đã ghi lại nó.

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

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

EDIT: 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 bên dưới:

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 như thế này ví dụ 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ụ trên fiddle .

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>

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 này Fiddle !

Đị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 để căn giữa một hộp cả theo chiều dọc và chiều ngang là sử dụng một thùng chứa 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 này Fiddle !

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

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

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ẽ căn chỉnh #inner theo chiều dọc. Nếu bạn không muốn, hãy xóa các thuộc tính display và vertical-align;

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à 1000px và 300px. Tiến hành như sau:

1. Bọc .inner bên trong .center-helper
2. Biến .center-helper thành một khối nội tuyến; nó trở thành cùng kích thước với .inner làm cho nó rộng 300px.
3. Đẩy .center-helper đúng 50% so với cha mẹ của nó; Điều này đặt bên trái của nó ở 500px wrt. bên ngoài.
4. Đẩy .inner 50% còn lại so với cha mẹ của nó; cái này đặt bên trái của nó ở -150px wrt. trung tâm trợ giúp có nghĩa là bên trái của nó ở mức 500 - 150 = 350px wrt. bên ngoài.
5. Đặt tràn trên .outer thành ẩ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>

.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}

Text-align: centre

Áp dụng text-align: center nội dung nội tuyến được căn giữa 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 auto là một tùy chọn khác và phù hợp hơn với 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: flex hoạ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 tại đây để biết danh sách tương thích hoàn chỉnh và cập nhật về 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: translate cho 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. Để định tâm theo chiều ngang, nó yêu cầu position: 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> là sự thay thế HTML cho text-align: center . Nó hoạt động trên các trình duyệt cũ hơn và hầu hết các trình duyệt mới nhưng nó không được coi là một cách thực hành 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>

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

Bạn có thể sử dụng display: flex cho div ngoài của mình và để căn giữa theo chiều ngang, bạn phải thêm justify-content: center

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

hoặc bạn có thể truy cập w3schools - Thuộc tính flex CSS để biết thêm ý tưởng.

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

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

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 <div> bên trong, điều kiện duy nhất là height và width của nó không được lớn hơn các container của nó.

Hãy thử chơi xung quanh với 

margin: 0 auto;

Nếu bạn cũng muốn căn giữa văn bản của mình, hãy thử sử dụng:

text-align: center;

Nếu bất cứ ai muốn một giải pháp jQuery cho trung tâm, hãy căn chỉnh các div này:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});

bạn chỉ có thể sử dụng flexbox như thế này:

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

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

Áp dụng Autoprefixer cho tất cả các hỗ trợ trình duyệt:

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

HOẶC CÁI GÌ ĐÓ KHÁC

sử dụng biến đổi :

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

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

với Autoprefixer:

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

CSS 3:

Bạn có thể sử dụng kiểu sau trên thùng chứa cha để phân phối các phần tử con theo chiều ngang:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

Một Nice DEMO liên quan đến các giá trị khác nhau cho justify-content.

Có thể: Khả năng tương thích trình duyệt

Thử nó!:

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>

Tôi đã áp dụng phong cách nội tuyến cho div bên trong. Sử dụng cái này 

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>

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

Bạn có thể đạt được điều này bằng cách sử dụng CSS Flexbox. Bạn chỉ cần áp dụng 3 thuộc tính cho phần tử cha để mọi thứ hoạt động.

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

Có một cái nhìn vào mã dưới đây sẽ làm cho bạn hiểu các thuộc tính tốt hơn nhiều.

Tìm hiểu thêm về CSS Flexbox

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }

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

Một điều tuyệt vời tôi mới tìm thấy, pha trộn việc sử dụng line-height + vertical-align và thủ thuật còn lại 50%, bạn có thể center một hộp có kích thước động bên trong một hộp có kích thước động khác, trên cả hai chiều ngang và dọc bằng CSS thuần. 

Lưu ý rằng bạn phải sử dụng các nhịp (và inline-block), được thử nghiệm trong các trình duyệt hiện đại + IE8 .HTML:

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS:

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

Xem ví dụ ở đây . 

Làm thế nào về CSS dưới đây cho #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}

Tôi chủ yếu sử dụng CSS này để trung tâm divs.

Trung tâm một div trong một div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}

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

Làm cho nó đơn giản!

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

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

Tôi chỉ sử dụng giải pháp đơn giản nhất, nhưng nó hoạt động trong tất cả các trình duyệt:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>

Sử dụng:

<div id="parent">
  <div class="child"></div>
</div>

Phong cách:

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

Nếu bạn muốn căn giữa nó theo chiều ngang, bạn nên viết như dưới đây:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}

Có thể sử dụng CSS 3 flexbox . Bạn có hai phương pháp khi sử dụng hộp flex.

1. Đặt cha mẹ display:flex; và thêm thuộc tính {justify-content:center; ,align-items:center;} vào phần tử cha của bạn.

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

<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

2. Đặt cha mẹ display:flex và thêm margin:auto; cho con.

#outer{
  display: flex;
}
#inner{
  margin: auto;
}

<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

Nó cũng có thể được căn giữa theo chiều ngang và chiều dọc bằng cách sử dụng định vị tuyệt đối, như thế này:

#outer{
    position: relative;
}

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

Bạn có thể sử dụng flexbox.

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

Bạn có thể tìm hiểu thêm về liên kết này: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Tôi muốn trả lời điều này vì tôi nhận thấy không ai đề cập đến phương pháp calc. Cách sử dụng dành cho div bạn đang định tâm, nếu bạn biết chiều rộng của nó, giả sử là 1200 pixel, hãy tìm:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

Vì vậy, về cơ bản, nó sẽ thêm một lề trái 50% trừ một nửa chiều rộng đã biết.

Cách được biết đến nhiều nhất được sử dụng rộng rãi và hoạt động trong nhiều trình duyệt bao gồm cả các trình duyệt cũ, là sử dụng margin như sau:

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}

<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

Chạy mã để xem nó hoạt động như thế nào, cũng có 2 điều quan trọng mà bạn không thể quên trong CSS của mình khi bạn cố gắng tập trung theo cách này: margin: 0 auto; làm cho nó trở thành trung tâm div như mong muốn, cộng với đừng quên width của trẻ , nếu không nó sẽ không được tập trung như mong đợi! 

Chúng ta có thể sử dụng FLEXBOX để đạt được điều này thực sự dễ dàng:

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

Trung tâm một div bên trong một div HORIZONTALLY:

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

Trung tâm một div bên trong một chứng nhận div:

#outer { 
  display: flex;
  align-items: center;
    }

Và, để hoàn toàn trung gian div theo chiều dọc và chiều ngang:

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

Hy vọng nó hữu ích cho một số bạn. Chúc mừng mã hóa!

Kể từ năm 2019 vì câu hỏi này vẫn nhận được rất nhiều lượt truy cập, câu trả lời của trình duyệt rất đơn giản cho trung tâm ngang là áp dụng quy tắc này cho thành phần chính:

.parentBox {
 display: flex;
 justify-content: center
}

Đây là một cách khác để căn giữa theo chiều ngang bằng cách sử dụng flexbox và không chỉ định bất kỳ chiều rộng nào cho thùng chứa bên trong. Ý tưởng là sử dụng các yếu tố giả sẽ đẩy nội dung bên trong từ bên phải và bên trái.

Sử dụng flex:1 trên phần tử giả sẽ làm cho chúng lấp đầy các khoảng trống còn lại và lấy kích thước bằng nhau và thùng chứa bên trong sẽ được căn giữa.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Chúng ta cũng có thể xem xét tình huống tương tự cho căn chỉnh dọc bằng cách thay đổi hướng flex sang cột:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}

<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Điều này tập trung div bên trong của bạn theo chiều ngang và chiều dọc:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

Đối với chỉ căn ngang, thay đổi

margin: 0 auto;

và cho chiều dọc, thay đổi

margin: auto 0;

CSS

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

HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

Sau khi đọc tất cả các câu trả lời tôi không thấy câu tôi thích. Đây là cách bạn có thể tập trung một yếu tố trong một yếu tố khác. 

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.trueCenter
{
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}

Bạn có thể thêm mã này:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}

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

Tùy thuộc vào hoàn cảnh của bạn, giải pháp đơn giản nhất có thể là:

margin:0 auto; float:none;

Câu trả lời dễ nhất thêm lề: auto; vào bên trong.

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

mã css

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

kiểm tra liên kết codepen của tôi http://codepen.io/feizel/pen/QdJJrK

Cung cấp một số width cho div bên trong và thêm margin:0 auto; trong thuộc tính CSS.

Sử dụng:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>

Vâng, đây là mã ngắn và sạch cho căn chỉnh ngang. Tôi hy vọng bạn thích mã này.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}

Sử dụng mã dưới đây.

HTML

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

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}

Sử dụng mã này:

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

Bạn có thể mua bằng cách sử dụng phù thủy hộp flex là một kỹ thuật tốt hiện nay . Để sử dụng hộp flex bạn nên cung cấp display: flex; và align-items: center; cho cha mẹ hoặc phần tử div #outer. Mã phải như thế này:

#outer {
  display: flex;
  align-items: center;
}

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

Điều này sẽ tập trung con bạn hoặc #inner div theo chiều ngang. Nhưng bạn thực sự không thể thấy bất kỳ thay đổi. Vì div #outer của chúng tôi không có chiều cao hay nói cách khác, chiều cao của nó được đặt thành tự động để nó có cùng chiều cao với tất cả các yếu tố con của nó. Vì vậy, sau một chút kiểu dáng trực quan, mã kết quả sẽ như thế này:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}

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

Bạn có thể thấy #inner div hiện là trung tâm. Flex-box là phương pháp mới để định vị các thành phần trong ngăn xếp ngang hoặc dọc với CSS và nó có 96% khả năng tương thích trình duyệt toàn cầu. Vì vậy, bạn có thể tự do sử dụng nó và nếu bạn muốn tìm hiểu thêm về lượt truy cập Flex-box CSS-Tricks bài viết, đó là nơi tốt nhất để học sử dụng Flex-box theo ý kiến ​​của tôi.

Nó thật đơn giản.

Chỉ cần quyết định chiều rộng bạn muốn cung cấp cho div bên trong và sử dụng CSS sau.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}

Điều này chắc chắn sẽ tập trung #inner của bạn theo cả chiều ngang và chiều dọc. Điều này cũng tương thích trong tất cả các trình duyệt. Tôi chỉ thêm phong cách bổ sung chỉ để cho thấy làm thế nào nó là trung tâm.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 

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

Nhưng tất nhiên nếu bạn chỉ muốn nó được xếp theo chiều ngang, Điều này có thể giúp bạn.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 

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

Bạn có thể sử dụng một dòng mã, chỉ cần text-align:center.

Đây là một ví dụ:

#inner {
  text-align:center;
  }

<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

Một trong những cách dễ nhất bạn có thể làm là sử dụng display: flex. Div bên ngoài chỉ cần có flex hiển thị và nhu cầu bên trong margin: 0 auto để làm cho nó nằm ở giữa theo chiều ngang.

Để tập trung theo chiều dọc và chỉ tập trung vào một div trong một div khác, vui lòng xem các bình luận của lớp .inner bên dưới

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}

<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}

Một trong những cách dễ nhất ...

<!DOCTYPE html> 
<html>
 <head>
    <style>
        #outer-div {
        width: 100%; 
        text-align: center;
        background-color: #000 
        }
        #inner-div {
        display: inline-block; 
        margin: 0 auto;
        padding: 3px;
        background-color: #888
        }
    </style>
 </head>
 <body>
    <div id ="outer-div" width="100%">
        <div id ="inner-div"> I am a easy horizontally centered div.</div>
    <div>
 </body>
</html>

Tôi xin lỗi nhưng em bé này từ những năm 1990 chỉ làm việc cho tôi:

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

Tôi sẽ xuống địa ngục vì tội lỗi này?

Điều tốt nhất tôi đã sử dụng trong các dự án khác nhau của mình là 

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

liên kết fiddle

Chúng ta có thể sử dụng lớp CSS tiếp theo, cho phép căn giữa theo chiều dọc và chiều ngang bất kỳ phần tử nào so với cha mẹ của nó:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML:

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

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

Cách tốt nhất là sử dụng hiển thị ô bảng (bên trong) xuất hiện chính xác sau div với bảng hiển thị (bên ngoài) và đặt căn dọc cho div bên trong (với hiển thị ô bảng) và mọi thẻ bạn sử dụng trong div bên trong ở trung tâm của div hoặc trang.

Lưu ý: bạn phải đặt chiều cao được chỉ định thành bên ngoài

Đó là cách tốt nhất mà bạn biết mà không có vị trí tương đối hoặc tuyệt đối và bạn có thể sử dụng nó trong mọi trình duyệt như nhau.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

Thay vì nhiều hàm bao và/hoặc lề tự động, giải pháp đơn giản này phù hợp với tôi:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Nó đặt div ở giữa chế độ xem (dọc và ngang), kích thước và điều chỉnh kích thước, hình nền trung tâm (dọc và ngang), văn bản trung tâm (ngang) và giữ div trong chế độ xem và trên đầu nội dung. Chỉ cần đặt HTML body và tận hưởng.

Hãy thử điều này:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}

điều này làm việc cho tôi:

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

Trong mã này, bạn sẽ được xác định chiều rộng của phần tử.

Tôi thấy tương tự với margin-left, nhưng cũng có thể là left.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}

Bạn có thể thêm một div khác có cùng kích thước #inner và di chuyển nó sang bên trái bằng -50% (một nửa chiều rộng của #inner) và #inner bằng 50%. Xin lỗi vì tiếng Anh của tôi

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

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

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

Thêm CSS vào div bên trong của bạn. Đặt margin: 0 auto và đặt chiều rộng của nó nhỏ hơn 100%, là chiều rộng của div ngoài.

<div id="outer" style="width:100%"> 
    <div id="inner" style="margin:0 auto;width:50%">Foo foo</div> 
</div>

Điều này sẽ cho kết quả mong muốn.

Tôi biết tôi hơi muộn khi trả lời câu hỏi này và tôi không buồn đọc từng câu trả lời để điều này có thể là một bản sao. Đây là của tôi :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }

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

Chỉ đơn giản là Margin:0px auto:

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

Thêm text-align:center; vào div cha 

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

hoặc là 

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

Các thuộc tính chính để căn giữa div là margin: auto và width: theo yêu cầu:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

đối với điều bình thường nếu bạn sử dụng div tĩnh

nếu bạn muốn div ở giữa khi div tuyệt đối với cha mẹ của nó thì đây là ví dụ:

.parentdiv{
   position:relative;
   height:500px;
}

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}

Bạn có thể làm điều đó theo một cách khác. Xem các ví dụ dưới đây:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}

Thử đi:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

Trước hết: Bạn cần cung cấp chiều rộng cho div thứ hai:

Ví dụ:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

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

Lưu ý rằng nếu bạn không cho nó một chiều rộng, nó sẽ lấy toàn bộ chiều rộng của dòng.