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;
}
css html center absolute CoreDo
sumber
Kemungkinan duplikat dari Bagaimana memusatkan elemen yang benar-benar diposisikan di div?
LoganMzz
@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>
Luaskan cuplikan

terima kasih
sumber
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%);
}
Adel
sumber
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>
Luaskan cuplikan

Meta Pakistan
sumber
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>
Luaskan cuplikan

Ronnie Royston
sumber
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;
}
Z. Rahman Raju
sumber
2

begitu mudah, hanya gunakan margin dan properti kiri, kanan:

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

Anda dapat melihat lebih banyak di tip ini => Cara mengatur elemen div ke pusat di html- Obinb blog

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

Amit Kumar
sumber
-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;
    }

}
Leonard Pauli
sumber