Bagaimana cara memusatkan div absolut secara horizontal menggunakan CSS?


177

Saya memiliki div dan ingin itu dipusatkan secara horizontal - meskipun saya berikan itu margin:0 auto;tidak terpusat ...

.container {
    position: absolute;
    top: 15px;
    z-index: 2;
    width:40%;
    max-width: 960px;
    min-width: 600px;
    height: 60px;
    overflow: hidden;
    background: #fff; 
    margin:0 auto;
}


@LoganMzz bukan karena pertanyaan ini diketahui lebarnya.
Davbog

Jawaban:


408

Anda perlu mengatur left: 0dan right: 0.

Ini menentukan seberapa jauh untuk mengimbangi tepi margin dari sisi jendela.

Seperti 'atas', tetapi menentukan seberapa jauh tepi margin kanan kotak diimbangi ke [kiri / kanan] tepi [kanan / kiri] dari blok yang berisi kotak.

Sumber: http://www.w3.org/TR/CSS2/visuren.html#position-props

Catatan: Elemen harus memiliki lebar lebih kecil dari jendela atau elemen lainnya akan mengambil seluruh lebar jendela.

Jika Anda bisa menggunakan kueri media untuk menentukan margin minimum , dan kemudian beralih ke autountuk ukuran layar yang lebih besar.


.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}
<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>


38
Catatan: widthadalah suatu keharusan!
Ijas Ameenudeen

2
Ya. Ini benar ... menggunakan "text-align: center;" dan "kiri: 0; kanan: 0;" akan memungkinkan Anda untuk posisi absolut div sambil menjaganya agar tetap horizontal.
Sterling Bourne

3
@AlexG Saya baru saja memuat biola di IE11 dan berhasil. Bisakah Anda mengklarifikasi?
Brian Webster

1
@AlexG berfungsi di IE11, namun tidak akan berfungsi jika Anda tidak menyatakan lebar . Saya memiliki masalah yang sama. Anda harus menggunakan lebar seperti yang ditunjukkan dalam contoh.
Panama Jack

1
juga diperlukan margin: autoagar bisa berfungsi dalam kasus kami
Crashalot

124

Ini tidak berfungsi di IE8 tetapi mungkin menjadi pilihan untuk dipertimbangkan. Ini terutama berguna jika Anda tidak ingin menentukan lebar.

.element
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Itu mungkin akan tergantung pada persyaratan proyeknya.
Kris Selbekk

3
Pada titik ini, masih perlu ada aturan dengan awalan -webkit- agar bisa berfungsi di Safari.
Shikkediel

Sayangnya itu entah bagaimana menerapkan transparansi div sekitarnya juga ke teks di dalam ..
dnl.re

1
Ini jelas jawabannya. Bagi saya, memiliki lebar yang diatur secara spesifik adalah mutlak tidak boleh.
Mike

14

Meskipun jawaban di atas benar tetapi untuk mempermudah para pemula, yang perlu Anda lakukan adalah menetapkan margin, kiri dan kanan. kode berikut akan melakukannya asalkan lebar diatur dan posisi absolut:

margin: 0 auto;
left: 0;
right: 0;

Demo:

.centeredBox {
    margin: 0 auto;
    left: 0;
    right: 0;
   
   
   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
   
   }
<div class="centeredBox">Centered Box</div>


1
Ini berfungsi sempurna untuk gambar absolut dalam deretan kolom bootstrap
ZachNag

5

Flexbox? Anda dapat menggunakan flexbox.

.box {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: center;
  justify-content: center;

}

.box div {
  border:1px solid grey;
  flex: 0 1 auto;
  align-self: auto;
  background: grey;
}
<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>


Ini sebenarnya bekerja dengan indah untuk kasus unik saya. left: 0; right: 0;diperluas hingga 100%, yang bukan pilihan karena elemen anak memiliki warna latar belakang, dan left: 50%; transform: translateY(-50%);tidak berfungsi karena itu membatasi anak hingga 50% lebar. Ini adalah satu-satunya solusi yang mempertahankan dimensi fleksibel anak (hanya terbatas pada dukungan browser). Terima kasih!
Ben Dyer

3
.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}


0

Berikut ini tautan, silakan gunakan ini untuk membuat div di tengah jika posisinya absolut.

HTML:

<div class="bar"></div>

CSS:

.bar{
  width:200px;
  border-top:4px solid red;
  position:absolute;
  margin-left:auto;
  margin-right:auto;
  left:0;
  right:0;
}

Contoh jsfiddle


-1

Anda tidak dapat menggunakan margin:auto;pada position:absolute;elemen, hanya menghapusnya jika Anda tidak membutuhkannya, namun, jika Anda melakukannya, Anda bisa menggunakan left:30%;((100% -40%) / 2) dan kueri media untuk max dan min nilai-nilai:

.container {
    position: absolute;
    top: 15px;
    left: 30%;
    z-index: 2;
    width:40%;
    height: 60px;
    overflow: hidden;
    background: #fff;
}

@media all and (min-width:960px) {

    .container {
        left: 50%;
        margin-left:-480px;
        width: 960px;
    }

}

@media all and (max-width:600px) {

    .container {
        left: 50%;
        margin-left:-300px;
        width: 600px;
    }

}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.