Bagaimana untuk memusatkan kotak secara mendatar dalam css3

Cara memusatkan kotak secara mendatar dalam CSS3: 1. Gunakan atribut margin dan tambahkan gaya "margin: 0 auto;" pada elemen kotak untuk memusatkannya secara mendatar pemusatan; 3. Gunakan kedudukan dan ubah sifat untuk mencapai pemusatan mendatar.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Cara memusatkan kotak secara mendatar dalam CSS ialah soalan temu bual yang sangat biasa Pemusatan kotak adalah relatif kepada elemen induk, jadi apabila kita memusatkan kotak, kita sering menggunakan sarang untuk membiarkan kotak induk bersarang. Dengan kotak kanak-kanak.

Dalam kotak ibu bapa-anak bersarang, cara untuk memusatkan kotak anak:

• Kaedah pertama: margin: 0 auto, menggunakan sempadan, tetapi penggunaan daripada margin akan menjejaskan Penggunaan kotak lain tidak disyorkan; jidar-kiri: kotak negatif Separuh daripada lebar, ini adalah kaedah yang paling biasa digunakan;

  ditulis dalam kotak induk
, display:flex,just-content:center;
Kaedah keempat: Berdasarkan kedudukan, gantikan margin-left dengan transformasi dalam CSS3: translate(-50px );

• Kaedah kelima: Berdasarkan kedudukan, hanya kekalkan anak dan ibu bapa, kemudian tambah margin:auto, kiri:0, kanan:0 pada kotak kanak-kanak ;

Tambahan: Dalam kaedah kelima, menambah atas:0, bawah:0 boleh mencapai pemusatan menegak dan mendatar

• Gunakan jidar untuk mencapai pemusatan mendatar:

<div id="father">
    <div id="son"></div>
</div>

Gunakan kedudukan, anak mestilah sama dengan ibu bapa, kemudian kiri: 50%, jidar-kiri: separuh daripada negatif lebar kotak:

<style>
    #father{
        width: 400px;
        height: 200px;
        border: 3px solid pink;
    }
    #son{
        width: 100px;
        height: 100px;
        border: 2px solid red;
    }
</style>

lentur, susun atur fleksibel, tengah kotak kanak-kanak, tetapi gaya hendaklah

ditulis dalam kotak induk

:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 30px auto; /* 让父元素相对于body居中 */
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    margin: 0 auto;/* 让子元素相对于father居中 */
}
</style>

Pada asas kedudukan, hanya Kekalkan anak dan ibu bapa, kemudian tambah margin:auto, kiri:0, kanan:0 pada kotak anak:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
</style>

Kaedah di atas boleh mencapai pemusatan mendatar kotak Jika anda mempunyai kaedah lain yang Cemerlang (ganjil) dan menonjol (hebat), dialu-alukan untuk bertukar itik!

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
}
</style>

Kaedah kelima ditambah: menambah atas:0, bawah:0 boleh mencapai pemusatan mendatar dan menegak:

<style>
#father{
    width: 400px;
    height: 200px;
    border: 3px solid pink;
    margin: 0 auto;
    position: relative;
}
#son{
    width: 100px;
    height: 100px;
    border: 2px solid red;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}
</style>

(Belajar perkongsian video:

tutorial video css

)

Atas ialah kandungan terperinci Bagaimana untuk memusatkan kotak secara mendatar dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!