ฉันจะจัดกึ่งกลาง<div>ภายในแนวนอน<div>โดยใช้ CSS ได้อย่างไร

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

คุณสามารถใช้ CSS นี้กับภายใน<div>:

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

แน่นอนว่าคุณไม่ได้มีการตั้งค่าที่จะwidth 50%ความกว้างน้อยกว่าที่มีอยู่ใด ๆ<div>จะทำงานได้ นี่margin: 0 autoคือสิ่งที่ทำให้ศูนย์กลางอยู่จริง

หากคุณกำหนดเป้าหมายเป็นInternet Explorer 8 (และใหม่กว่า) อาจเป็นการดีกว่าที่จะมีสิ่งนี้แทน:

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

widthมันจะทำให้ศูนย์องค์ประกอบด้านในแนวนอนและทำงานได้โดยไม่ต้องตั้งที่เฉพาะเจาะจง

ตัวอย่างการทำงานที่นี่:

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

หากคุณไม่ต้องการตั้งค่าความกว้างคงที่ด้านในdivคุณสามารถทำสิ่งนี้:

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

#inner {
  display: inline-block;
}

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

ที่ทำให้ภายในเป็นองค์ประกอบแบบอินไลน์ที่สามารถเป็นศูนย์กลางที่มีdivtext-align

วิธีการที่ดีที่สุดคือด้วยCSS 3

รูปแบบกล่อง:

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

ตามการใช้งานของคุณคุณอาจใช้box-orient, box-flex, box-directionคุณสมบัติ

งอ :

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

อ่านเพิ่มเติมเกี่ยวกับการจัดองค์ประกอบลูกให้อยู่กึ่งกลาง

• ลิงก์ 2

• ลิงค์ 3

• ลิงค์ 4

และ สิ่งนี้อธิบายว่าทำไมรูปแบบกล่องเป็นวิธีที่ดีที่สุด :

• ทำไมกล่องแบบ W3C ถึงดีกว่า?

สมมติว่า div ของคุณกว้าง 200 พิกเซล:

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

ตรวจสอบให้แน่ใจองค์ประกอบหลักคือ ตำแหน่งเช่นสัมพันธ์คงที่สัมบูรณ์หรือเหนียว

หากคุณไม่ทราบความกว้างของ div คุณสามารถใช้ transform:translateX(-50%);แทนส่วนต่างติดลบได้

https://jsfiddle.net/gjvfxxdj/

ด้วยCSS calc ()โค้ดสามารถรับได้ง่ายยิ่งขึ้น:

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

หลักการยังคงเหมือนเดิม วางสิ่งของไว้ตรงกลางและชดเชยความกว้าง

ฉันได้สร้างตัวอย่างนี้เพื่อแสดงวิธีการในแนวตั้งและแนวนอน alignแนวนอน

รหัสนี้เป็นพื้น:

#outer {
  position: relative;
}

และ...

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

และมันจะยังคงอยู่centerแม้ในขณะที่คุณปรับขนาดหน้าจอ

โปสเตอร์บางคนได้กล่าวถึงวิธี CSS 3 display:boxไปยังศูนย์ใช้

ไวยากรณ์นี้ล้าสมัยและไม่ควรใช้อีกต่อไป [ดูโพสต์นี้]โพสต์นี้]

ดังนั้นเพื่อความสมบูรณ์นี่คือวิธีล่าสุดในการจัดกึ่งกลางใน CSS 3 โดยใช้โมดูลเค้าโครงกล่องแบบยืดหยุ่นมีความยืดหยุ่นกล่องเค้าโครงโมดูล

ดังนั้นหากคุณมีมาร์กอัปง่ายๆเช่น:

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

... และคุณต้องการจัดรายการของคุณให้อยู่กึ่งกลางภายในกล่องนี่คือสิ่งที่คุณต้องการในองค์ประกอบหลัก (.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>

หากคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่าที่ใช้ไวยากรณ์ที่เก่ากว่าสำหรับ flexbox นี่เป็นจุดที่น่าค้นหา

หากคุณไม่ต้องการตั้งค่าความกว้างคงที่และไม่ต้องการระยะขอบเพิ่มdisplay: inline-blockให้เพิ่มองค์ประกอบของคุณ

คุณสามารถใช้ได้:

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

การจัดกึ่งกลางของ div ของความสูงและความกว้างที่ไม่รู้จัก

แนวนอนและแนวตั้ง ใช้งานได้กับเบราว์เซอร์ที่ทันสมัยพอสมควร (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera และอื่น ๆ )

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

ทิงเกอร์กับมันเพิ่มเติมเกี่ยวกับCodepenหรือบนJSBin

ไม่สามารถอยู่กึ่งกลางถ้าคุณไม่ให้ความกว้าง มิฉะนั้นจะใช้พื้นที่แนวนอนทั้งหมดตามค่าเริ่มต้น

คุณสมบัติจัดแนวกล่องของ CSS 3

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

การตั้งค่าwidthและการตั้งค่าmargin-leftและการmargin-right autoว่าสำหรับแนวนอนเพียงแต่ หากคุณต้องการทั้งสองวิธีคุณก็ทำได้ทั้งสองวิธี อย่ากลัวที่จะทดลอง ไม่ใช่ว่าคุณจะทำอะไรผิดพลาด

ฉันเพิ่งต้องตั้งศูนย์ "div" ที่ซ่อนอยู่ (เช่น display:none;ที่มีแบบฟอร์มที่อยู่ภายในซึ่งจำเป็นต้องให้อยู่กึ่งกลางหน้า ฉันเขียนรหัส jQuery ต่อไปนี้เพื่อแสดง div ที่ซ่อนอยู่แล้วอัปเดตเนื้อหา CSS เป็นความกว้างที่สร้างขึ้นโดยอัตโนมัติของตารางและเปลี่ยนระยะขอบเพื่อจัดกึ่งกลาง (สลับการแสดงผลถูกทริกเกอร์โดยคลิกที่ลิงค์ แต่รหัสนี้ไม่จำเป็นต้องแสดง)

หมายเหตุ:ฉันกำลังแบ่งปันรหัสนี้เนื่องจาก Google นำฉันมาที่โซลูชัน Stack Overflow และทุกอย่างจะทำงานได้ยกเว้นว่าองค์ประกอบที่ซ่อนอยู่ไม่มีความกว้างและไม่สามารถปรับขนาด / กึ่งกลางจนกว่าจะปรากฏขึ้น

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

วิธีที่ฉันมักจะทำคือใช้ตำแหน่งที่แน่นอน:

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

div ภายนอกไม่จำเป็นต้องมีคุณสมบัติพิเศษใด ๆ เพื่อให้สามารถใช้งานได้

สำหรับ Firefox และ Chrome:

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

สำหรับ Internet Explorer, Firefox และ Chrome:

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

text-align:อสังหาริมทรัพย์เป็นทางเลือกสำหรับเบราว์เซอร์ที่ทันสมัย แต่มันเป็นสิ่งจำเป็นในโหมด Quirks Internet Explorer สำหรับการสนับสนุนมรดกเบราว์เซอร์

ใช้:

#outerDiv {
  width: 500px;
}

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

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

วิธีแก้ไขปัญหานี้อีกโดยไม่ต้องตั้งค่าความกว้างสำหรับองค์ประกอบอย่างใดอย่างหนึ่งคือการใช้transformแอตทริบิวต์CSS 3

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

เคล็ดลับคือการtranslateX(-50%)ตั้งค่า#innerองค์ประกอบ 50 เปอร์เซ็นต์ทางด้านซ้ายของความกว้างของตัวเอง คุณสามารถใช้เคล็ดลับเดียวกันสำหรับการจัดตำแหน่งแนวตั้ง

นี่คือซอแสดงการจัดแนวนอนและแนวตั้ง

ข้อมูลเพิ่มเติมเกี่ยวกับMozilla พัฒนาเครือข่าย

Chris Coyier ผู้เขียนโพสต์ที่ยอดเยี่ยมใน 'Centering in the Unknown' ในบล็อกของเขา เป็นบทสรุปของโซลูชั่นที่หลากหลาย ฉันโพสต์หนึ่งที่ไม่ได้โพสต์ในคำถามนี้ มีการสนับสนุนเบราว์เซอร์มากกว่าโซลูชันFlexboxและคุณไม่ได้ใช้งานdisplay: table;ซึ่งอาจทำลายสิ่งอื่น ๆ

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

ฉันเพิ่งพบวิธีการ:

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

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

องค์ประกอบทั้งสองจะต้องมีความกว้างเท่ากันเพื่อให้ทำงานได้อย่างถูกต้อง

ตัวอย่างเช่นดูลิงก์นี้และตัวอย่างด้านล่าง:

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>

หากคุณมีเด็กจำนวนมากภายใต้พาเรนต์ดังนั้นเนื้อหา CSS ของคุณจะต้องเป็นแบบนี้ในซอตัวอย่างเช่นไวโอลิน

เนื้อหา HTML มีลักษณะดังนี้:

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

จากนั้นเห็นนี้ตัวอย่างเช่นไวโอลิน

จัดกึ่งกลางในแนวนอนเท่านั้น

จากประสบการณ์ของฉันวิธีที่ดีที่สุดในการจัดกึ่งกลางกล่องในแนวนอนคือใช้คุณสมบัติต่อไปนี้:

ภาชนะบรรจุ:

• ควรมี text-align: center;

กล่องเนื้อหา:

• ควรมี display: inline-block;

การสาธิต:

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

ดูซอนี้ !

จัดกึ่งกลางทั้งแนวนอนและแนวตั้ง

จากประสบการณ์ของผมวิธีที่ดีที่สุดไปยังศูนย์กล่องทั้งสองแนวตั้งและแนวนอนคือใช้คอนเทนเนอร์เพิ่มเติมและใช้คุณสมบัติต่อไปนี้:

ภาชนะด้านนอก:

• ควรมี display: table;

ภาชนะภายใน:

• ควรมี display: table-cell;
• ควรมี vertical-align: middle;
• ควรมี text-align: center;

กล่องเนื้อหา:

• ควรมี display: inline-block;

การสาธิต:

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

ดูซอนี้ !

วิธีที่ง่ายที่สุด:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

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

หากความกว้างของเนื้อหาที่ไม่เป็นที่รู้จักคุณสามารถใช้วิธีการดังต่อไปนี้ สมมติว่าเรามีองค์ประกอบสองอย่างนี้:

• .outer - เต็มความกว้าง
• .inner - ไม่ได้ตั้งค่าความกว้าง (แต่สามารถระบุความกว้างได้สูงสุด)

สมมติว่าความกว้างที่คำนวณได้ขององค์ประกอบคือ 1,000 พิกเซลและ 300 พิกเซลตามลำดับ ดำเนินการดังนี้:

1. ห่อ.innerด้านใน.center-helper
2. สร้าง.center-helperบล็อกแบบอินไลน์ มันจะกลายเป็นขนาดเดียวกับที่.innerทำให้มันกว้าง 300 พิกเซล
3. กด.center-helper50% ไปทางขวาสัมพันธ์กับผู้ปกครอง; สถานที่นี้เหลือ 500 พิกเซล ด้านนอก
4. ดัน .innerซ้าย 50% สัมพันธ์กับผู้ปกครอง; สถานที่นี้เหลือที่ -150 พิกเซล wrt ศูนย์ช่วยเหลือซึ่งหมายความว่าด้านซ้ายมีค่าอยู่ที่ 500 - 150 = 350 พิกเซล ด้านนอก
5. ตั้งค่า overflow on .outerเป็น hidden เพื่อป้องกันแถบเลื่อนแนวนอน

การสาธิต:

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>

คุณสามารถทำอะไรเช่นนี้

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

สิ่งนี้จะจัดแนวใน#innerแนวตั้ง หากคุณไม่ต้องการให้ลบdisplayและvertical-alignคุณสมบัติ

นี่คือสิ่งที่คุณต้องการในวิธีที่สั้นที่สุด

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

จัดเรียงข้อความ: กึ่งกลาง

การใช้text-align: centerเนื้อหาแบบอินไลน์จะถูกจัดกึ่งกลางภายในกล่องบรรทัด อย่างไรก็ตามเนื่องจาก div ภายในมีค่าเริ่มต้นwidth: 100%คุณต้องตั้งค่าความกว้างเฉพาะหรือใช้สิ่งใดสิ่งหนึ่งต่อไปนี้:

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

ระยะขอบ: 0 อัตโนมัติ

การใช้margin: 0 autoเป็นอีกตัวเลือกหนึ่งและเหมาะสมกว่าสำหรับความเข้ากันได้ของเบราว์เซอร์รุ่นเก่า display: tableมันทำงานร่วมกับ

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

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

flexbox

display: flexทำงานเหมือนองค์ประกอบบล็อกและวางเนื้อหาตามโมเดล flexbox justify-content: centerจะทำงานร่วมกับ

โปรดทราบ: Flexbox เข้ากันได้กับเบราว์เซอร์ส่วนใหญ่ แต่ไม่ทั้งหมด ดูที่นี่สำหรับสมบูรณ์และวันที่รายการของเบราว์เซอร์ที่เข้ากันได้

#inner {
  display: inline-block;
}

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

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

แปลง

transform: translateช่วยให้คุณปรับเปลี่ยนพื้นที่ประสานงานของรูปแบบการจัดรูปแบบภาพ CSS การใช้องค์ประกอบสามารถแปลหมุนหมุนปรับขนาดและเบ้ เพื่อให้เป็นศูนย์กลางในแนวนอนก็ต้องและposition: absoluteleft: 50%

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

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

<center> (เลิกใช้)

แท็ก<center>เป็นทางเลือก HTML text-align: centerเพื่อ ใช้งานได้กับเบราว์เซอร์รุ่นเก่าและใหม่ส่วนใหญ่ แต่ก็ไม่ถือว่าเป็นแนวปฏิบัติที่ดีเนื่องจากคุณลักษณะนี้ล้าสมัยและถูกลบออกจากมาตรฐานเว็บ

#inner {
  display: inline-block;
}

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

คุณสามารถใช้display: flexสำหรับ div ด้านนอกและกึ่งกลางแนวนอนที่คุณต้องเพิ่มjustify-content: center

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

หรือคุณสามารถเยี่ยมชมw3schools - CSS flex Propertyสำหรับแนวคิดเพิ่มเติม

Flex มีการสนับสนุนเบราว์เซอร์มากกว่า 97% และอาจเป็นวิธีที่ดีที่สุดในการแก้ปัญหาประเภทนี้ภายในไม่กี่บรรทัด:

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

ฉันจัดการเพื่อหาวิธีแก้ปัญหาที่อาจเหมาะสมกับทุกสถานการณ์ แต่ใช้ JavaScript:

นี่คือโครงสร้าง:

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

และนี่คือข้อมูลโค้ด 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);
  })
});

หากคุณต้องการใช้ในวิธีตอบสนองคุณสามารถเพิ่มรายการต่อไปนี้:

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

วิธีนี้ยังใช้งานได้ดี:

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

สำหรับด้าน<div>ในเงื่อนไขเดียวคือมันheightและwidthต้องไม่ใหญ่กว่าของภาชนะ

มีตัวเลือกเดียวที่ฉันพบ:

ทุกคนบอกว่าจะใช้:

margin: auto 0;

แต่มีตัวเลือกอื่น ตั้งค่าคุณสมบัตินี้สำหรับ div parent มันทำงานได้อย่างสมบูรณ์แบบทุกที่ทุกเวลา:

text-align: center;

และดูเด็กไปศูนย์

และสุดท้าย CSS สำหรับคุณ:

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

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