679

ฉันมีปัญหาตรงกลางองค์ประกอบที่มีแอตทริบิวต์ชุดposition absoluteไม่มีใครรู้ว่าทำไมภาพไม่ได้อยู่ตรงกลาง?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

ขยายตัวอย่างข้อมูล

— user1098278
แหล่งที่มา

3

คุณต้องให้ ul # สไลด์โชว์ความกว้างคงที่ ...

— ptriek

1194

หากคุณตั้งค่าความกว้างคุณสามารถใช้:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

— baaroz
แหล่งที่มา

21

นี่เป็นคำตอบที่สะอาดกว่าที่เหลือ! มีคำเตือนใด ๆ หรือไม่?

— sbichenko

8

คำตอบที่ฉลาดที่สุด ฉันเพิ่งตรวจสอบและใช้งานได้กับเบราว์เซอร์ทั้งหมด มันไม่ทำงานบน IE8 แต่ทำงานบน IE> = 9

— Roger

13

ให้แน่ใจว่าได้ทดสอบใน IE เคล็ดลับนี้ไม่ทำงานถ้าองค์ประกอบมี 'ความกว้างสูงสุด' ตั้งอยู่ใน IE9

— aphax

33

ฉันชอบไวยากรณ์ "margin: 0 auto; left: 0; right: 0;"

— Hector Ordonez

58

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

— Codemonkey

585

โดยไม่ทราบว่าwidth/ heightขององค์ประกอบ¹ตำแหน่งนั้นยังคงเป็นไปได้ที่จะจัดเรียงดังต่อไปนี้:

ตัวอย่างที่นี่

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

เป็นที่น่าสังเกตว่าการแปลง CSS ได้รับการสนับสนุนใน IE9 ขึ้นไป (คำนำหน้าผู้ขายละเว้นสำหรับความกะทัดรัด)

คำอธิบาย

การเพิ่มtop/ leftของ50%ย้ายขอบระยะขอบด้านบน / ซ้ายขององค์ประกอบไปยังกึ่งกลางของพาเรtranslate()นต์และฟังก์ชั่นที่มีค่า(ลบ)ของการ-50%ย้ายองค์ประกอบโดยครึ่งหนึ่งของขนาด ดังนั้นองค์ประกอบจะอยู่ในตำแหน่งตรงกลาง

นี่เป็นเพราะค่าเปอร์เซ็นต์ของคุณสมบัติtop/ leftสัมพันธ์กับความสูง / ความกว้างขององค์ประกอบหลัก (ซึ่งกำลังสร้างบล็อกที่มี)

ในขณะที่ค่าเปอร์เซ็นต์ในการเปลี่ยนฟังก์ชั่นเป็นญาติกับความกว้าง / ความสูงขององค์ประกอบของตัวเอง(จริงๆแล้วมันหมายถึงขนาดของกล่องขอบเขต )translate()

สำหรับการจัดแนวทิศทางเดียวไปด้วยtranslateX(-50%)หรือtranslateY(-50%)แทน

^{1. องค์ประกอบที่มีpositionอื่น ๆ staticกว่า เช่นrelative, absolute, fixedค่า}

— Hashem Qolami
แหล่งที่มา

65

นี่ควรเป็นคำตอบที่ดีที่สุด !!

— Chris Pine

3

Fantastic! สุดยอดมาก ๆ !

— Bhargav Ponnapalli

4

ฉันค้นหาทุกที่เพื่อหาคำตอบและคำอธิบายที่ดี นี่คือคำตอบที่ดีที่สุดและคำอธิบายที่ดีเช่นกัน! ขอบคุณ

— Mike

5

การจัดกึ่งกลางแนวตั้ง: position: absolute; left: 50%; transform: translateX(-50%);, การจัดกึ่งกลางแนวตั้ง: position: absolute; top: 50%; transform: translateY(-50%);.

— КонстантинВан

1

ตอนนี้ฉันพบว่าtranslateคุณสมบัติแปลองค์ประกอบตามขนาดของตัวเองไม่ว่าขนาดของแม่

— Farzin Kanzi

185

การจัดกึ่งกลางสิ่งที่absoluteอยู่ในตำแหน่งค่อนข้างซับซ้อนใน CSS

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

เปลี่ยนmargin-leftเป็น (ลบ) ครึ่งความกว้างขององค์ประกอบที่คุณพยายามจัดกึ่งกลาง

— bookcasey
แหล่งที่มา

5

เมื่อทำการทดสอบมันจะไม่ทำงานเมื่อภาพมีขนาดแตกต่างกันและพวกเขาก็ยังเรียงซ้อนกัน

— Ryan Gibbons

3

Hack-ish ด้วยเช่นกัน (เพราะเกือบจะกลายเป็น css เสมอ) แต่น่ากลัว! :-)

— Dr.Kameleon

1

ฉันถูกล่อลวงด้วยความเฉลียวฉลาดของคำตอบอื่น แต่มีเพียงอันนี้เท่านั้นที่เชื่อถือได้สำหรับฉัน

— Chris Schiffhauer

ฉันมีปัญหาเดียวกันเช่นไรอันฉันจึงลองคำตอบที่สองที่แนะนำโดย "baaroz" และมันใช้ได้สำหรับฉัน !!! และมันก็รองรับความละเอียดที่แตกต่างกันเช่นกันเนื่องจาก DIV หลักของฉันมีความกว้างเป็น% และไม่ใช่ PX

— UID

นี่ไม่ได้อยู่กึ่งกลางจริงๆ ตำแหน่งนี้อยู่ทางด้านขวามากขึ้น

— Artsicle

82

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

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

หมายเหตุ: องค์ประกอบควรมีการตั้งค่าความกว้างและความสูง

— Sebin Simon
แหล่งที่มา

1

ฉันไม่รู้ว่าทำไมสิ่งนี้จึงไม่โหวตมากขึ้น ใช้ได้กับทุกเบราว์เซอร์รวมถึงเบราว์เซอร์มือถือเท่าที่ฉันจะบอกได้ ตะเข็บน่าเชื่อถือมากขึ้นในแง่ของการสนับสนุน มันง่ายและสะอาด ...

— เดวิดมาร์ติน

1

นี่เป็นคำตอบที่ดีกว่า ต้องการเพียงหนึ่ง div ในการสร้างและมีจำนวนกรณีการใช้งานมากกว่าการโทรเหลือ: 50%; สูงสุด: 50%; ชอบวิธีแก้ปัญหาด้วยคะแนน 69+

— Ian S

คำตอบที่ดีที่สุดเท่าที่เคยมีใครมาที่นี่ควรตรวจสอบ!

— Abdo Adel

3

องค์ประกอบนี้ยังต้องมีheightชุดสำหรับการทำงาน

— alexbooots

55

เคล็ดลับ CSS ง่ายๆเพียงเพิ่ม:

width: 100%;
text-align: center;

ใช้ได้ทั้งรูปภาพและข้อความ

— cutez7boyz
แหล่งที่มา

48

หากคุณต้องการจัดองค์ประกอบให้อยู่กึ่งกลาง

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

ถ้าคุณต้องการให้คอนเทนเนอร์อยู่กึ่งกลางจากซ้ายไปขวา แต่ไม่ใช่ด้วยบนลงล่าง

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

ถ้าคุณต้องการให้คอนเทนเนอร์อยู่กึ่งกลางจากบนลงล่างโดยไม่คำนึงถึงการซ้ายไปขวา

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

อัปเดตข้อมูล ณ วันที่ 15 ธันวาคม 2558

ฉันได้เรียนรู้เคล็ดลับใหม่อีกไม่กี่เดือนที่ผ่านมา สมมติว่าคุณมีองค์ประกอบหลักสัมพันธ์

นี่คือองค์ประกอบที่แน่นอนของคุณ

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

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

— เวสลีย์ไบรอัน Lachenal
แหล่งที่มา

36

วิธีจัดองค์ประกอบ "ตำแหน่ง: สัมบูรณ์" ไว้ที่กึ่งกลาง

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}

— Vadamadafaka
แหล่งที่มา

32

สิ่งนี้ใช้ได้กับฉัน:

position: absolute;
left: 50%;
transform: translateX(-50%);

— Deplake
แหล่งที่มา

27

ถึงตำแหน่งกึ่งกลาง aa: แอตทริบิวต์แบบสัมบูรณ์คุณต้องตั้งค่าด้านซ้าย: 50% และระยะขอบซ้าย: -50% ของความกว้างของ div

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

สำหรับศูนย์กลางแนวตั้งแน่นอนคุณต้องทำในสิ่งเดียวกันโดยไม่เหลือเพียงส่วนบนสุด (หมายเหตุ: html และเนื้อหาจะต้องมีความสูงขั้นต่ำ 100%)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

และสามารถรวมกันสำหรับทั้งสอง

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>

— Rednas
แหล่งที่มา

16

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

ดูการสาธิตเกี่ยวกับ: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; ทำงานร่วมกับposition: absoluteองค์ประกอบเมื่อมีการเพิ่มleft: 0; right: 0;

— โมฮัมหมัด Dayeh
แหล่งที่มา

2

โปรดระบุความเห็นหรือเหตุผลบางอย่างที่อยู่เบื้องหลังว่าทำไมรหัสนี้จึงใช้งานได้ คำตอบของรหัสนั้นจะถูกตั้งค่าสถานะเพื่อลบ

— rayryeng

14

ง่ายกว่าดีที่สุด:

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

จากนั้นคุณต้องแทรกแท็ก img ของคุณลงในแท็กที่ตำแหน่งกีฬา: คุณสมบัติที่เกี่ยวข้องดังนี้:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

— Stéphane de Luca
แหล่งที่มา

8

อาจสั้นที่สุด

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;

— คริส
แหล่งที่มา

1

มันค่อนข้างยอดเยี่ยม แต่ก็แค่ตั้งศูนย์ในแนวตั้งและแนวนอนเราจำเป็นต้องทำมาร์จิ้นอัตโนมัติเท่านั้น

— Santosh

7

หากคุณไม่ทราบความกว้างขององค์ประกอบคุณสามารถใช้รหัสนี้:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

การสาธิตที่ fiddle: http://jsfiddle.net/wrh7a21r/

ที่มา: https://stackoverflow.com/a/1777282/1136132

— joseantgv
แหล่งที่มา

@ NabiK.AZ ตัวอย่างนี้มีประโยชน์หากคุณไม่ทราบความกว้างขององค์ประกอบ ในตัวอย่างของคุณคุณตั้งค่าความกว้างเป็น div

— joseantgv

7

หรือตอนนี้คุณสามารถใช้ flex box กับ postion absolute:

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}

— เซบาสเตียนโทมัส
แหล่งที่มา

underrated ดังนั้น

— Siege21x

5

ฉันไม่แน่ใจว่าสิ่งที่คุณต้องการที่จะประสบความสำเร็จ แต่ในกรณีนี้เพียงแค่เพิ่มความwidth: 100%;ประสงค์ของคุณul#slideshow liจะทำ

คำอธิบาย

imgแท็กเป็นองค์ประกอบแบบอินไลน์บล็อก ซึ่งหมายความว่าพวกเขาไหลแบบอินไลน์เช่นข้อความ แต่ยังมีความกว้างและความสูงเช่นองค์ประกอบบล็อก ใน css ของคุณมีtext-align: center;กฎสองข้อที่ใช้กับ<body>และ#slideshowWrapper(ซึ่งซ้ำซ้อน btw) สิ่งนี้ทำให้องค์ประกอบอินไลน์และอินไลน์บล็อกลูกทั้งหมดอยู่กึ่งกลางในองค์ประกอบบล็อกที่ใกล้ที่สุดในรหัสของคุณนี่คือliแท็ก องค์ประกอบบล็อกทั้งหมดมีwidth: 100%หากเป็นแบบคงที่ ( position: static;) ซึ่งเป็นค่าเริ่มต้น ปัญหาคือเมื่อคุณบอกliแท็กให้position: absolute;คุณนำพวกเขาออกจากการไหลคงที่ปกติและสิ่งนี้ทำให้พวกเขาลดขนาดให้พอดีกับเนื้อหาภายในของพวกเขาในคำอื่น ๆ ที่พวกเขาชนิด "สูญเสีย" width: 100%คุณสมบัติของพวกเขา

— คอนสแตนตินคาลบาซอฟ
แหล่งที่มา

5

การใช้ left: calc(50% - Wpx/2);ตำแหน่ง W คือความกว้างขององค์ประกอบให้ฉัน

— Julix
แหล่งที่มา

คุณจะกำหนด W ได้อย่างไร?

— Purplejacket

เขากล่าวว่า "รูปภาพ" - เป็นการดีที่สุดเมื่อทำรูปภาพสำหรับเว็บที่คุณควรจะทำภาพในขนาดที่คุณจะใช้ (แทนที่จะปรับขนาด) เพื่อหลีกเลี่ยงน้ำหนักที่ไม่จำเป็น (ถ้าคุณสร้างภาพขนาดใหญ่ เล็ก) หรือความคลุมเครือ (ถ้าคุณทำให้ภาพเล็กใหญ่) - คุณสามารถใช้ "imageElement.naturalHeight" และ "imageElement.naturalWidth" หากคุณใช้ jQuery แล้วใช้สไตล์แบบไดนามิกเช่นกัน แต่มันก็ซับซ้อนเล็กน้อย เพื่อความเป็นธรรมคำตอบอื่น ๆ อีกมากมายยังทำให้คุณต้องรู้ความกว้างของภาพเพื่อให้เทคนิคของพวกเขาทำงาน

— Julix

หากคุณไม่ทราบวิธีการรับ W อย่างแท้จริงใน Chrome คุณสามารถใช้ CTRL + Shift + i (เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์) จากนั้นกด CTRL + Shift + C (โหมดตรวจสอบ) เพื่อเลื่อนเมาส์ไปที่องค์ประกอบต่างๆ คุณยังสามารถตัดสินใจได้ว่าต้องการให้มันกว้างแค่ไหนและเพิ่ม "width: Wpx" ลงใน css ของคุณ

— Julix

4

รูปภาพของคุณไม่อยู่กึ่งกลางเนื่องจากรายการของคุณไม่อยู่กึ่งกลาง เฉพาะข้อความของพวกเขาเป็นศูนย์กลาง คุณสามารถบรรลุตำแหน่งที่คุณต้องการโดยจัดกึ่งกลางรายการทั้งหมดหรือจัดกึ่งกลางของภาพภายในรายการ

คุณสามารถดูโค้ดที่แก้ไขแล้วที่ด้านล่าง ในการแก้ไขของฉันฉันจัดกึ่งกลางทั้งรายการและรูปภาพภายใน

ความจริงก็คือคุณไม่สามารถจัดองค์ประกอบที่มีตำแหน่งที่แน่นอน

แต่พฤติกรรมนี้สามารถลอกเลียนแบบได้!

หมายเหตุ: คำแนะนำเหล่านี้จะทำงานกับองค์ประกอบบล็อก DOM ใด ๆ ไม่ใช่เพียงแค่ img

ล้อมรอบรูปภาพของคุณด้วย div หรือแท็กอื่น ๆ (ในกรณีของคุณคือ li)
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
หมายเหตุ: ชื่อที่กำหนดให้กับองค์ประกอบเหล่านี้ไม่ใช่ชื่อพิเศษ

เปลี่ยน css หรือ scss ของคุณเพื่อให้ตำแหน่ง div สมบูรณ์และภาพของคุณอยู่กึ่งกลาง

.absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}

และคุณมีมัน! img ของคุณควรอยู่กึ่งกลาง!

รหัสของคุณ:

ลองใช้ดู

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}

<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

ขยายตัวอย่างข้อมูล

ฉันหวังว่านี่จะเป็นประโยชน์ โชคดี!

— D3RPZ1LLA
แหล่งที่มา

3

วัตถุสัมบูรณ์ภายในวัตถุสัมพันธ์สัมพันธ์กับแม่ของปัญหาที่นี่คือคุณต้องมีความกว้างคงที่สำหรับภาชนะบรรจุ#slideshowWrapperและส่วนที่เหลือของการแก้ปัญหาเป็นเหมือนผู้ใช้รายอื่นกล่าวว่า

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

— eveevans
แหล่งที่มา

ซอของคุณเป็นภาพสองภาพซ้อนกันซึ่งกันและกัน

— Ryan Gibbons

3

นี่คือทางออกที่ง่ายและดีที่สุดสำหรับองค์ประกอบกลางด้วย“ ตำแหน่ง: สัมบูรณ์”

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }

<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

ขยายตัวอย่างข้อมูล

— SantoshK
แหล่งที่มา

2

คุณสามารถลองวิธีนี้:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }

<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>

ขยายตัวอย่างข้อมูล

— Chirag Dave
แหล่งที่มา

1

ตำแหน่งสัมบูรณ์นำออกมาจากการไหลและวางไว้ที่ 0x0 กับผู้ปกครอง (องค์ประกอบบล็อกสุดท้ายจะมีตำแหน่งที่แน่นอนหรือตำแหน่งสัมพัทธ์)

ฉันไม่แน่ใจว่าสิ่งที่คุณกำลังพยายามที่จะประสบความสำเร็จสิ่งที่ดีที่สุดคือการตั้งค่า li เป็น a position:relativeและนั่นจะทำให้พวกเขาอยู่ตรงกลาง รับ CSS ปัจจุบันของคุณ

ลองดูที่http://jsfiddle.net/rtgibbons/ejRTU/เพื่อเล่นกับมัน

— ไรอันชะนี
แหล่งที่มา

: / ในตอนท้ายเกือบจะเป็นคำตอบเดียวกับคุณ ... <คะแนนโหวตขึ้น

— eveevans

1

#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

ฉันจำไม่ได้ว่าฉันเห็นวิธีการจัดกึ่งกลางรายการข้างต้นโดยใช้ค่าลบด้านบนขวาล่างหรือซ้าย สำหรับฉัน tehnique นี้ดีที่สุดในสถานการณ์ส่วนใหญ่

เมื่อฉันใช้ชุดค่าผสมจากด้านบนรูปภาพจะทำงานเหมือนภาพพื้นหลังพร้อมการตั้งค่าต่อไปนี้:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

รายละเอียดเพิ่มเติมเกี่ยวกับตัวอย่างแรกสามารถดูได้ที่นี่:
รักษาอัตราส่วนของ div ด้วย CSS

— Marian07
แหล่งที่มา

0

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

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

จนกว่าฉันจะอ่านการโพสต์นี้โดยใช้ระยะขอบ: 0 เทคนิคอัตโนมัติเพื่อสร้างเมนูทางด้านซ้ายของเนื้อหาของฉันฉันต้องสร้างคอลัมน์ความกว้างเดียวกันทางด้านขวาเพื่อสร้างความสมดุล ไม่สวย. ขอบคุณ!

— คณบดีดีน
แหล่งที่มา

0

ใช้margin-left: x%;โดยที่ x คือครึ่งหนึ่งของความกว้างขององค์ประกอบ

— Bibaswann Bandyopadhyay
แหล่งที่มา

-1

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>

ขยายตัวอย่างข้อมูล

— antelove
แหล่งที่มา

1

คำตอบนี้มีรหัสเท่านั้น แม้ว่ามันอาจจะถูกต้อง แต่ก็ควรมีคำอธิบายประกอบว่าทำไมรหัสจึงตอบคำถามของ OP รหัสไม่ใช่ "อธิบายตนเอง" ใน Stack Exchnge

— JBH

วิธีจัดองค์ประกอบ "ตำแหน่ง: สัมบูรณ์" ให้อยู่ตรงกลาง

คำอธิบาย

คำอธิบาย

แต่พฤติกรรมนี้สามารถลอกเลียนแบบได้!

และคุณมีมัน! img ของคุณควรอยู่กึ่งกลาง!

รหัสของคุณ: