CSS: phần tử trung tâm trong phần tử <div>

Để căn giữa một phần tử HTML, tôi có thể sử dụng CSS left: 50%;. Tuy nhiên, điều này tập trung vào yếu tố đối với toàn bộ cửa sổ.

Tôi có một yếu tố là con của một <div>yếu tố và tôi muốn tập trung vào đứa trẻ đối với cha mẹ này <div>, không phải toàn bộ cửa sổ.

Tôi không muốn các thùng chứa <div>để có tất cả các nội dung của nó làm trung tâm, chỉ là con một cụ thể.

Đặt text-align:center;thành div cha, và margin:auto;div div.

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
.left {
    margin:auto auto auto 0;
    background-color:red;
}
.right {
    margin:auto 0 auto auto;
    background-color:yellow;
}

<div id="parent">
    <div id="child1" class="block center">
        a block to align center and with text aligned left
    </div>
    <div id="child2" class="block left">
        a block to align left and with text aligned left
    </div>
    <div id="child3" class="block right">
        a block to align right and with text aligned left
    </div>
</div>

Đây là một nguồn tốt để trung tâm hầu hết mọi thứ.
http://howtocenterincss.com/

Trên thực tế, điều này rất đơn giản với các hộp flex CSS3 .

.flex-container{
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
  
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <div class="inner-element"></div>
</div>

CẬP NHẬT:

Có vẻ như tôi đã không đọc bản chỉnh sửa OP tại thời điểm tôi viết câu trả lời này. Đoạn mã trên sẽ tập trung tất cả các phần tử bên trong (không chồng chéo giữa chúng), nhưng OP chỉ muốn một phần tử cụ thể được căn giữa , chứ không phải các phần tử bên trong khác. Vì vậy, @Warface trả lời phương thức thứ hai phù hợp hơn, nhưng nó vẫn yêu cầu định tâm dọc:

.flex-container{
  position: relative;
  
  /* Other styling stuff */
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%,-50%);
  /* or 3d alternative if you will add animations (smoother transitions) */
  transform: translate3d(-50%,-50%,0);

  /* Other styling stuff */
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <p>Other inner elements like this follows the normal flow.</p>
  <div class="inner-element"></div>
</div>

CSS

  body{
    text-align:center;
    }
    .divWrapper{
    width:960px //Change it the to width of the parent you want
    margin: 0 auto;
    text-align:left;
    }

HTML

<div class="divWrapper">Tada!!</div>

Điều này nên tập trung vào div

2016 - Phương pháp HTML5 + CSS3

CSS

div#relative{
  position:relative;
}

div#thisDiv{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

HTML

<div id="relative">
  <div id="thisDiv">Bla bla bla</div>
</div>

Fiddledlidle

https://jsfiddle.net/1z7m83dx/

text-align:center; trên div cha nên làm thủ thuật

Chỉ tập trung vào đứa trẻ cụ thể:

.parent {
  height: 100px;
  background-color: gray;
  position: relative;
}

.child {
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20px;
  height:20px;
  margin: auto;

}

<div class="parent">
   <span class="child">hi</span>
</div>  

HOẶC, bạn cũng có thể sử dụng flex, nhưng điều đó sẽ tập trung vào tất cả trẻ em

.parent {
  height: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: white;  
}

<div class="parent">
   <span class="child">hi</span>
</div>

Bạn có thể sử dụng tên lớp bootstrap flex như thế:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

Điều đó sẽ làm việc ngay cả với số lượng các yếu tố bên trong.

Là div có chiều rộng cố định hay chiều rộng chất lỏng? Dù bằng cách nào, đối với chiều rộng chất lỏng bạn có thể sử dụng:

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

Hoặc bạn có thể đặt div cha thành text-align:center;và div con thành text-align:left;.

Và left:50%;chỉ căn giữa nó theo toàn bộ trang khi div được đặt thành position:absolute;. Nếu bạn đặt div cho left:50%;nó thì nó sẽ tương ứng với chiều rộng của div cha. Đối với chiều rộng cố định, làm điều này:

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}

chỉ cần cung cấp cho cha mẹ div position: relative

Nếu bạn muốn sử dụng CSS3:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

Bạn có thể muốn thực hiện các tìm kiếm thêm để tìm ra cách lấy tỷ lệ phần trăm phù hợp với chiều rộng của phần tử của bạn.

Trước hết bạn có thể làm điều đó với bên trái: 50% để căn giữa nó so với div cha nhưng vì điều đó bạn cần học định vị CSS.

Một giải pháp khả thi từ nhiều người là làm một cái gì đó như

    div.parent { text-align:center; }    //will center align every thing in this div as well as in the children element
    div.parent div { text-align:left;}   //to restore so every thing would start from left

nếu div của bạn được đặt ở vị trí tương đối, bạn có thể làm

    .mydiv { position:relative; margin:0 auto; } 

bên trái: 50% hoạt động tương ứng với cha mẹ gần nhất với chiều rộng tĩnh được gán. Hãy thử chiều rộng: 500px hoặc một cái gì đó trên div cha. Ngoài ra, làm cho nội dung bạn cần để hiển thị trung tâm: chặn và đặt lề trái và phải thành tự động.

Nếu phần tử con là nội tuyến (ví dụ không phải là a div, tablev.v.) tôi sẽ bọc nó bên trong a divhoặc a pvà làm cho văn bản của trình bao bọc sắp xếp thuộc tính css bằng với tâm.

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

Mặt khác, nếu phần tử là một khối ( display: blockví dụ a divhoặc a p) có chiều rộng cố định, tôi sẽ đặt các thuộc tính css bên trái và bên phải thành tự động.

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

Tất nhiên bạn có thể thêm một text-align: centerphần tử trình bao bọc để làm cho nội dung của nó cũng được căn giữa.

Tôi sẽ không bận tâm đến việc định vị vì IMHO không phải là vấn đề của OP nhưng hãy chắc chắn kiểm tra liên kết này , rất hữu ích.

Tạo một phần tử div mới cho phần tử của bạn làm trung tâm, sau đó thêm một lớp cụ thể để định tâm phần tử đó như thế này

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

Css

.centered{
    text-align:center;
}

Tôi đã tìm thấy một giải pháp khác

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

và trong cơ thể

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

Điều này sẽ tập trung vào div nội dung của bạn bất cứ khi nào container của bạn lớn hơn hoặc nhỏ hơn. Trong trường hợp này, nội dung của bạn phải lớn hơn 1100% vùng chứa để không được căn giữa, nhưng trong trường hợp đó, bạn có thể thực hiện với containerSecond lớn hơn và nó sẽ hoạt động

Chỉ định text-align: center;cho cha mẹ và display: inline-block;div.

ví dụ: tôi có một div bài viết bên trong một div nội dung chính .. Bên trong bài viết có một hình ảnh và bên dưới hình ảnh đó là một nút, kiểu như thế này:

.bài báo {

width: whatever;
text-align: center; 
float: whatever (in case you got more articles in a row); 
margin: give it whatever margin you want;

} .bài báo {

}

/ * bên trong bài viết tôi muốn hình ảnh làm trung tâm * /

.article img {

float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;

}

/ * Bây giờ dưới hình ảnh này trong cùng một yếu tố bài viết sẽ có một nút như đọc thêm Tất nhiên bạn cần phải làm việc với em hoặc% khi bên trong thiết kế phản hồi * /

.cái nút {

background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/

}

Chúc may mắn

Nếu bạn muốn tập trung các yếu tố bên trong div và không quan tâm đến kích thước phân chia, bạn có thể sử dụng sức mạnh Flex. Tôi thích sử dụng flex và không sử dụng kích thước chính xác cho các yếu tố.

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

Như bạn có thể thấy div ngoài là thùng chứa Flex và bên trong phải là vật phẩm Flex được chỉ định flex: 1 1 auto;để hiểu rõ hơn bạn có thể xem mẫu đơn giản này. http://jsfiddle.net/QMaster/hC223/

Hy vọng điều này giúp đỡ.

Của tôi muốn phép thuật.

html, body {
 height: 100%;
}

.flex-container{
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}


<div class="flex-container">
  <div>Content</div>
</div>

<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">

     </div>
     </div> 
  </body>
</html>