วิธีการจัดองค์ประกอบตำแหน่งที่แน่นอนใน div?

1078

ฉันต้องวางองค์ประกอบdiv(พร้อมposition:absolute;) ในใจกลางหน้าต่างของฉัน แต่ผมกำลังมีปัญหาในการทำเช่นนั้นเพราะมีความกว้างไม่เป็นที่รู้จัก

ฉันลองสิ่งนี้ แต่จำเป็นต้องปรับเนื่องจากความกว้างตอบสนองได้

.center {
  left: 50%;
  bottom:5px;
}

ความคิดใด ๆ

— อิ
แหล่งที่มา

4

คุณมีตัวอย่างในตัวอย่างของAbsolute centerที่สามารถวางนัยในสถานการณ์ต่างๆ

— Mihai8

2

มีคำตอบที่ดีกว่าสำหรับคำถามนี้ที่stackoverflow.com/questions/17976995/…

— Andrew Swift

1333

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

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

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

76

น่ากลัว ทำงานให้ฉัน! ปัญหาหนึ่งที่ฉันมี: ภาพที่ฉันอยู่ตรงกลางค่อนข้างใหญ่สิ่งนี้ทำให้ div ภายนอกอยู่นอกขอบด้านขวาของหน้าและทำให้เลื่อนในแนวนอน ฉันเปลี่ยนคุณสมบัติ "ซ้าย" css สำหรับ "ขวา" และจนถึงตอนนี้มันใช้งานได้ดีกว่าเนื่องจากการข้ามขอบด้านซ้ายของหน้าจอไม่ได้ทำให้เกิดการเลื่อน

— BoomShaka

จะเกิดอะไรขึ้นถ้าผู้ใช้เลื่อนหน้าลง overylay จะปรากฏที่ด้านบนคุณคิดว่าควรใช้ jquery เพื่อแก้ไขปัญหาการเลื่อน

— ไหม

1

วิธีแก้ปัญหาสำหรับปัญหาการเลื่อนอาจเป็นได้position: fixedแต่ถ้าหากไม่ทราบความสูงของการซ้อนทับแถบเลื่อนสำหรับการซ้อนทับจะต้องถูกนำมาใช้

— PUG

3

มีปัญหาเล็กน้อยที่ฉันพบโดยใช้เทคนิคนี้ เนื่องจาก div ด้านนอกใช้เวลา 50% ของหน้าจอการขยับบางอย่างเกิดขึ้นเมื่อข้อความกว้างกว่าหน้าจอ 50% ฉันแก้ไขได้โดยตั้ง div ด้านนอกเป็น "width: 100%" และลบคุณสมบัติด้านซ้าย สำหรับ div ภายในฉันเพียงตั้งค่าการจัดแนวข้อความเป็นกึ่งกลาง วิธีนี้จะช่วยแก้ปัญหา

— Nicky L.

3

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

— bobince

1801

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

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

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

— Matthias Weiler
แหล่งที่มา

36

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

— โจเซฟ Ravenwolfe

58

ต้องตั้งค่าความกว้างของ div ให้อยู่กึ่งกลาง - จะไม่ทำงานโดยอัตโนมัติด้วยการพูดปุ่มที่มีข้อความอยู่

— Stefan

2

@Joshua นี่จะเป็นศูนย์กลางในแนวนอนไม่ใช่แนวตั้งเหมือนคำตอบอื่น ๆ

— ygoe

3

ฉันชอบโซลูชันนี้เนื่องจากไม่เพิ่มขนาดวิวพอร์ต

— iceydee

13

สำหรับการสนับสนุนข้ามเบราว์เซอร์: widthควรตั้งค่าเป็นค่าเฉพาะสำหรับการทำงานนี้ autoและ100%จะไม่ให้องค์ประกอบอยู่กึ่งกลาง display: block;คือต้อง position: absolute;ไม่ต้อง ค่าทั้งหมดจะทำงาน ขององค์ประกอบหลักควรจะกำหนดให้สิ่งอื่นที่ไม่ใช่position staticการตั้งค่าleftและrightเพื่อ0ไม่จำเป็น margin-left: auto; margin-right: auto;จะทำผลงาน

— Onur Yıldırım

767

โซลูชั่นที่ตอบสนอง

นี่เป็นทางออกที่ดีสำหรับการออกแบบที่ตอบสนองหรือมิติที่ไม่รู้จักโดยทั่วไปหากคุณไม่ต้องการรองรับ IE8 หรือต่ำกว่า

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

แสดงตัวอย่างโค้ด

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

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

นี่คือ JS Fiddle

ปมคือที่left: 50%สัมพันธ์กับผู้ปกครองในขณะที่การtranslateแปลงจะสัมพันธ์กับความกว้าง / ความสูงองค์ประกอบ

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

คุณสามารถจัดกึ่งกลางแนวตั้งด้วยสิ่งนี้ (และอีกครั้งความกว้างและความสูงของผู้ปกครองและเด็กสามารถยืดหยุ่นได้อย่างสมบูรณ์ (และ / หรือไม่ทราบ):

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

โปรดทราบว่าคุณอาจต้องมีtransformผู้ขายนำหน้าด้วยเช่นกัน ตัวอย่างเช่น-webkit-transform: translate(-50%,-50%);

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

26

ด้วยการรองรับ IE7 ไม่จำเป็นอีกต่อไปสิ่งนี้ควรเป็นทางออกที่แท้จริง การแก้ปัญหานี้ดีกว่าเทคนิคซ้าย: 0 / ขวา: 0 เนื่องจากทำให้องค์ประกอบเต็มความกว้างขณะที่รักษาความกว้างและทำงานกับองค์ประกอบของความกว้างที่ไม่รู้จัก

— aleemb

51

โดยคำตอบที่ดีที่สุดนี้ใช้งานได้ถ้ากล่อง div อยู่ในนั้นมีขนาดเล็กกว่าเด็ก

— คดี

2

@ChadJohnson แน่นอน ลองใช้ด้วยwebkit-คำนำหน้าตามที่ฉันแนะนำ

— ProblemsOfSumit

2

อ่าฉันคิดถึงบันทึกย่อของคุณเกี่ยวกับ -webkit น่ากลัว

— ชาดจอห์นสัน

3

transform: translateดูเหมือนว่าจะposition: fixedใช้ไม่ได้กับเด็ก ๆ คำตอบที่ยอมรับใช้งานได้ดีขึ้นในกรณีนี้

— dmvianna

49

โพสต์ที่ดีจริงๆ .. แค่อยากจะเพิ่มถ้ามีคนต้องการที่จะทำมันด้วยแท็ก div เดียวแล้วนี่ทางออก:

การเป็นwidth900px

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

ในกรณีนี้เราควรรู้widthล่วงหน้า

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

26

"because the width is unknown"... นี่ไม่ได้ตอบคำถาม

— Michel Ayres

15

สวัสดี @Michel จริงเมื่อคุณ google ค้นหาสิ่งที่เกี่ยวข้องกับศูนย์ div แน่นอนลิงค์นี้มาเป็นลิงค์แรก นั่นเป็นเหตุผลที่ฉันเพิ่มโซลูชันนี้ในกรณีที่ใครบางคนอย่างฉันอยู่ในการค้นหาวิธีการแก้ปัญหาดังกล่าวข้างต้น .. :)

— pratikabu

1

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

— Sean Kendle

35

ศูนย์สัมบูรณ์

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

ตัวอย่าง: http://jsbin.com/rexuk/2/

ทดสอบใน Google Chrome, Firefox และ IE8

หวังว่าจะช่วย :)

— Ijas Ameenudeen
แหล่งที่มา

นี้ไม่ได้ทำงานโปรดตรวจสอบต่อไป codepen codepen.io/anon/pen/YqWxjJ

— มาร์ค

1

ขออภัยฉันคิดว่ามันจะใช้งานได้ แต่คุณต้องมีรหัสความสูงและความกว้างคงที่ codepen.io/anon/pen/WwxEYQ

— Mark

31

งานนี้สำหรับแนวตั้งและแนวนอน

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

และถ้าคุณต้องการให้ศูนย์องค์ประกอบของผู้ปกครองตั้งค่าตำแหน่งของผู้ปกครองญาติ

 #parentElement{
      position:relative
  }

แก้ไข:

สำหรับแนวตั้งศูนย์จัดแนวความสูงขององค์ประกอบ ขอบคุณ @Raul
ถ้าคุณต้องการให้ศูนย์องค์ประกอบของผู้ปกครองกำหนดตำแหน่งของผู้ปกครองเพื่อญาติ

— Mohsen Abdollahi
แหล่งที่มา

2

ฉันคิดว่าคุณต้องเพิ่มความสูงเพื่อให้แนวตั้งทำงานได้

— Raul

ดูเหมือนว่าตำแหน่งนี้อยู่ตรงกลางของหน้าไม่ใช่ศูนย์กลางขององค์ประกอบอื่น

— GünterZöchbauer

1

@ GünterZöchbauerใช่ถ้าคุณต้องการให้ศูนย์กลางองค์ประกอบของผู้ปกครองตั้งค่าตำแหน่งของญาติผู้ปกครอง

— Mohsen Abdollahi

20

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

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

ทำงานกับ chrome และ Firefox

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

5

ฉันคิดว่าคุณไม่จำเป็นต้องมี "text-align: center"

— Tobias

นี้ได้รับการแก้ไขปัญหาของฉันที่นี่ ขอบคุณ!

— Volomike

ฉันต้องการ "การจัดแนวข้อความ: กึ่งกลาง" และสิ่งนี้ทำงานได้ที่การแก้ปัญหาที่แนะนำโดย @ProblemsOfSumit ไม่ทำงานเพราะมันทำให้ข้อความของฉันขาด

— Nat

19

หากคุณต้องการจัดกึ่งกลางในแนวนอนและแนวตั้งด้วย:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

— michal.jakubeczy
แหล่งที่มา

ขอบคุณการแก้ไขที่ยอดเยี่ยมมาก

— Stanley Bateswar

15

** วิธีแก้ปัญหาที่รับผิดชอบ **

สมมติว่าองค์ประกอบใน div เป็นอีกหนึ่ง div ...

วิธีนี้ใช้ได้ผลดี

<div class="container">
  <div class="center"></div>
</div>

ภาชนะสามารถขนาดใด ๆ (ต้องเป็นตำแหน่งสัมพัทธ์)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

องค์ประกอบ ( div ) สามารถมีขนาดใดก็ได้ (ต้องเล็กกว่าคอนเทนเนอร์ )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

ผลจะออกมาเป็นแบบนี้ เรียกใช้ข้อมูลโค้ด

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}

<div class="container">
	<div class="center"></div>
</div>

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

ฉันพบว่ามันมีประโยชน์มาก

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

1

อัจฉริยภาพ ทำไมคนอื่นถึงไม่ทำแบบนี้

— mesqueeb

ขอขอบคุณการเข้ารหัสที่มีความสุข

— RealMJDev

13

นี่คือการผสมผสานของคำตอบอื่น ๆ ซึ่งทำงานกับเรา:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

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

คนดีแก้ไขขอบคุณ!

— Stanley Bateswar

12

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

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

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

สิ่งนี้บอกว่าให้ฉัน a top: 50%และ a left: 50%จากนั้นเปลี่ยน (สร้างพื้นที่) ทั้งสองแกน X / Y เป็น-50%ค่าในแง่ "สร้างพื้นที่กระจก"

เช่นนี้จะสร้างพื้นที่ที่เท่ากันในจุด 4 ทั้งหมดของ div ซึ่งเป็นช่องเสมอ (มี 4 ด้าน)

นี่จะ:

ทำงานโดยไม่ต้องทราบความสูง / ความกว้างของผู้ปกครอง
ทำงานบนการตอบสนอง
ทำงานบนแกน X หรือ Y หรือทั้งสองอย่างในตัวอย่างของฉัน
ฉันไม่สามารถเกิดสถานการณ์ที่มันไม่ทำงาน

— Daniel Moss
แหล่งที่มา

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

— Daniel Moss

การแปลง / แปลจะทำให้ซาฟารีแสดงข้อความเบลอในระดับหนึ่ง

— James Tan

@DanielMoss มีเหตุผลที่จะไม่ใช้translate(-50%,-50%);?

— ทำเครื่องหมาย Baijens

12

ใช้งานได้กับความกว้างที่ไม่รู้จักแบบสุ่มขององค์ประกอบตำแหน่งที่แน่นอนที่คุณต้องการให้อยู่กึ่งกลางขององค์ประกอบภาชนะของคุณ

การสาธิต

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

9

Flex สามารถนำมาใช้เพื่อจัดวาง div กลางตำแหน่งแน่นอน

display:flex;
align-items:center;
justify-content:center;

แสดงตัวอย่างโค้ด

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

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

— Dhaval Jardosh
แหล่งที่มา

บนหน้าจอของฉัน -Firefox 68.x มันไม่ได้จัดแนวบล็อกแบบสัมบูรณ์จะปรากฏที่ด้านล่างของบล็อกแบบสัมพัทธ์

— Webwoman

ลองได้display: -webkit-flex;ไหม

— Dhaval Jardosh

7

เท่าที่ฉันรู้มันเป็นไปไม่ได้ที่จะบรรลุถึงความกว้างที่ไม่รู้จัก

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

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

+1 สำหรับสิ่งของ "margin: auto" ฉันได้ลองวิธีนี้มาก่อนเพื่อจัดกึ่งกลาง div ในแนวนอนโดยใช้บรรทัด "margin: 0 auto" - "0" ที่ใช้กับระยะขอบแนวตั้งและ "auto" ในแนวนอน ฉันคิดว่านี่เป็นสิ่งที่ StackOverflow ใช้สำหรับ div ระดับบนสุดเพื่อให้ได้เส้นขอบสีขาวหนา 2 เส้นที่ด้านข้างของหน้าเว็บ อย่างไรก็ตามหน้า W3Schools ในสถานะ CSS margin สำหรับค่าอัตโนมัติว่า "ผลลัพธ์ของสิ่งนี้ขึ้นอยู่กับเบราว์เซอร์" - ฉันไม่ได้ลองเป็นการส่วนตัวกับเบราว์เซอร์ที่แตกต่างกันดังนั้นฉันจึงไม่สามารถแสดงความคิดเห็นได้ในจุดนี้ (แต่ มันเห็นได้ชัดว่าไม่หลอกลวงในบางส่วนของพวกเขา)

— Steg

1

เป็นไปได้สำหรับความกว้างที่ไม่รู้จัก (และความสูง) หาก IE8 ไม่ใช่ปัญหา ดูคำตอบของฉันสำหรับรายละเอียด

— ProblemsOfSumit

7

ฉันต้องการเพิ่มคำตอบของ @ bobince:

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

ปรับปรุงแล้ว: /// สิ่งนี้ทำให้แถบเลื่อนแนวนอนไม่ปรากฏพร้อมองค์ประกอบขนาดใหญ่ใน div ที่อยู่กึ่งกลาง

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; 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>
    </div>
</body>

— ขวดเล็ก
แหล่งที่มา

6

นี่คือปลั๊กอิน jQuery ที่มีประโยชน์สำหรับการทำเช่นนี้ พบที่นี่ ฉันไม่คิดว่ามันเป็นไปได้อย่างหมดจดด้วย CSS

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

— Ben Shelock
แหล่งที่มา

นี่เป็นวิธีที่ดีกว่าและโดยเฉพาะอย่างยิ่งกับการออกแบบที่ตอบโต้

— m4tm4t

จะไม่สำคัญหากใช้ jQuery ไม่ว่าในกรณีใด

— Code Whisperer

8

นี่ไม่ใช่วิธีที่ดีกว่า ควรใช้ CSS ทุกครั้งที่ทำได้ดีกว่าเสมอ การจัดกึ่งกลาง DIV สามารถทำได้ด้วย CSS ในทุกแกนและสำหรับหน้าตอบสนอง ไม่จำเป็นต้องใช้ JavaScript!

— ProblemsOfSumit

1

@yckart และในกรณีนี้เครื่องมือคือ CSS

— ProblemsOfSumit

5

รุ่น sass / compass ของ Responsive Solution ด้านบน:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

— อดัมสเปนซ์
แหล่งที่มา

4

transform: translate(-50%, -50%)ทำให้ข้อความและเนื้อหาอื่น ๆ เบลอบน OS X โดยใช้เบราว์เซอร์ webkit keithclark.co.uk/articles/gpu-text-rendering-in-webkit

— Yasha

เพียงแค่ใช้ประเภทของการลดรอยหยักที่คุณชอบ-webkit-font-smoothing: antialiased;ฉันได้รวบรวมมันจากบทความที่คุณโพสต์ btw!

— Adam Spence

4

วิธีการตั้งศูนย์ที่ฉันต้องการ:

position: absolute;
margin: auto;
width: x%

การวางตำแหน่งองค์ประกอบบล็อกแบบสัมบูรณ์
ระยะขอบอัตโนมัติ
ซ้าย / ขวาเดียวกัน, บน / ล่าง

JSFiddle ที่นี่

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

4

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

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

— อลัน
แหล่งที่มา

มันเป็น @Matthias Weiler ตอบ 5 ปีต่อมา

— aloisdg กำลังย้ายไปยัง codidact.com

3

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

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

— ดัสติน Poissant
แหล่งที่มา

3

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

— Burcu AKCAOGLU
แหล่งที่มา

2

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

— ดัสติน Poissant
แหล่งที่มา

2

วิธีนี้ใช้ได้ผลถ้าองค์ประกอบมีwidthและheight

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="content"></div>
</div>

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

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

2

การแก้ปัญหาของคำถามนี้ไม่ได้ผลสำหรับกรณีของฉัน .. ฉันกำลังทำคำบรรยายสำหรับภาพบางภาพและฉันแก้ไขโดยใช้สิ่งนี้

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}

<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>

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

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

1

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

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

    width: 100px;
    height: 100px;

    background: #ccc;
}

ตัวอย่างนี้และอื่น ๆที่นี่

1

นี่เป็นเคล็ดลับที่ฉันคิดออกมาเพื่อให้ DIV ลอยอยู่ตรงกลางหน้ากระดาษ แน่นอนน่าเกลียดจริงๆ แต่ใช้ได้ในทุก

จุดและเส้นประ

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

ทำความสะอาด

ว้าวที่ห้าปีเพิ่งบินไปใช่มั้ย

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— นายข
แหล่งที่มา

1

.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

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

0

คุณสามารถวางภาพใน div และเพิ่ม div id และมี CSS สำหรับ div นั้นได้ text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}

— Dworvin Vonstrangle
แหล่งที่มา

0

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

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

— amit bende
แหล่งที่มา

0

วิธีการง่ายๆที่ทำงานให้ฉันจัดบล็อกที่มีความกว้างที่ไม่ทราบแนวนอน:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

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

สิ่งนี้ใช้ได้กับ Firefox, Chrome, IE, Edge และ Safari รุ่นล่าสุด

— Terence Bandoian
แหล่งที่มา