Bagaimana untuk memusatkan html secara menegak

Untuk pembangun bahagian hadapan, pemusatan mendatar agak mudah, tetapi pemusatan menegak adalah masalah yang lebih sukar. Dalam artikel ini, kita akan membincangkan cara memusatkan elemen secara menegak dalam HTML.

Secara amnya, terdapat banyak cara untuk memusatkan elemen HTML secara menegak. Di bawah, kami meneroka beberapa kaedah ini.

1. Gunakan Flexbox

Flexbox (susun atur kotak fleksibel) ialah salah satu kaedah reka letak terkini CSS3 dan merupakan kaedah pemusatan yang sangat mudah. Idea utama Flexbox adalah untuk mencipta kotak fleksibel dalam bekas, dan kemudian mengawal sifat kotak fleksibel untuk mencapai pemusatan mendatar dan menegak. Mari kita lihat cara menggunakan Flexbox untuk mencapai pemusatan menegak:

Kod HTML:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

Kod CSS:

.container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

Dalam contoh ini, kami mula-mula menyediakan bekas ketinggian, kemudian tetapkan mod paparan bekas kepada Flexbox, dan gunakan sifat justify-content dan align-item untuk memusatkan elemen secara menegak dan mendatar. Perlu diingat bahawa kaedah ini hanya berfungsi untuk pemusatan menegak yang mudah.

2. Gunakan kedudukan mutlak

Kedudukan mutlak ialah kaedah biasa. Menggunakan kedudukan mutlak, anda boleh memusatkan elemen secara menegak berbanding elemen induknya. Pelaksanaan khusus adalah seperti berikut:

Kod HTML:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

Kod CSS:

.container {
    position: relative;
    height: 300px;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

Dalam contoh ini, kami mula-mula menetapkan kedudukan: relatif untuk bekas, dan kemudian tetapkan kedudukan: relatif untuk elemen kanak-kanak Tetapkan kedudukan: mutlak, dan tetapkan harta teratas kepada 50%. Dengan cara ini elemen kanak-kanak dipusatkan secara menegak. Walau bagaimanapun, akan terdapat beberapa ruang kosong tambahan di bahagian atas elemen ini. Untuk menghapuskan ruang putih ini, kami menggunakan transform: translateY(-50%), yang menterjemahkannya sehingga separuh ketinggiannya supaya elemen itu betul-betul berpusat menegak.

3. Gunakan sel jadual

Menggunakan sel jadual adalah bersamaan dengan menukar elemen HTML kepada elemen jadual. sel meja boleh mencapai pemusatan mendatar dan menegak yang mudah, tetapi ia agak menyusahkan. Mari kita lihat kaedah pelaksanaan khusus:

Kod HTML:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

Kod CSS:

.container {
    display: table;
    height: 300px;
    width: 100%;
    text-align: center;
}
.child {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

Dalam contoh ini, kami mula-mula menetapkan mod paparan bekas kepada table , kemudian tetapkan ketinggian dan lebar bekas kepada saiz yang kita mahu, dan tetapkan penjajaran teks ke tengah (memusatkannya secara mendatar). Seterusnya, kami menetapkan mod paparan elemen kanak-kanak kepada sel jadual dan mencapai pemusatan menegak melalui atribut penjajaran menegak.

4. Gunakan reka letak grid

Reka Letak Grid CSS ialah kaedah reka letak yang berkuasa yang membolehkan kami membuat reka letak jenis grid dengan cepat dan berkesan, termasuk pemusatan mendatar dan menegak. Pelaksanaan khusus adalah seperti berikut:

Kod HTML:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

Kod CSS:

.container {
    display: grid;
    height: 300px;
    place-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

Dalam contoh ini, kami mula-mula menggunakan paparan: grid untuk menetapkan mod paparan bagi bekas ke grid Susun atur grid. Kami kemudian menggunakan harta item tempat untuk memusatkannya secara mendatar dan menegak. Memandangkan kaedah ini masih agak baru, ia masih belum cukup baik dari segi keserasian pelayar.

Ringkasan

Dalam artikel ini, kami meneroka beberapa cara biasa untuk mencapai pemusatan menegak dalam HTML. Setiap kaedah ini mempunyai kelebihan dan kekurangan, dan anda boleh memilih kaedah yang sesuai mengikut situasi dan keperluan sebenar. Jika ia hanya pemusatan menegak yang mudah, maka menggunakan Flexbox atau kedudukan mutlak adalah agak mudah dan berkesan Untuk reka letak yang lebih kompleks, anda boleh menggunakan Reka Letak Grid CSS.

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