Pemusatan - Cabaran CSS
Nov 05, 2024 pm 04:20 PMAnda boleh menemui semua kod dalam siaran ini di repo Github.
Anda boleh menyemak visual di sini Vertical Center - CodeSandbox and Horizontal Center.
Memusatkan melalui CSS
Pemusatan menegak
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Centering</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p class="center-by-absolute-margin">Centering</p> <p class="center-by-pseudo-class">Centering</p> <p class="center-by-line-height">Centering</p> <p class="center-by-table">Centering</p> <div class="center-by-flex"> <p>Centering</p> </div> <div class="center-by-grid"> <p>Centering</p> </div> <div class="center-by-absolute-parent"> <p class="center-by-absolute-child">Centering</p> </div> <p class="center-by-calc">Centering</p> </body> </html>
.center-by-absolute-margin { position: absolute; top: 0; bottom: 0; margin: auto 0; } .center-by-pseudo-class::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .center-by-line-height { height: 200px; line-height: 200; } .center-by-table { display: table-cell; vertical-align: middle; } .center-by-flex { display: flex; align-items: center; } .center-by-grid { display: grid; align-items: center; } .center-by-absolute-parent { position: relative; } .center-by-absolute-child { position: absolute; top: 50%; transform: translateY(-50%); } .center-by-calc { height: 70px; position: relative; top: calc(50% - 35px); }
Pemusatan mendatar
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Centering</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <p class="center-by-fixed-width">Centering</p> <p class="center-by-text-align">Centering</p> <div class="center-by-unfixed-width"> <span>Centering</span> </div> <p class="center-by-table">Centering</p> <div class="center-by-flex"> <p>Centering</p> </div> <div class="center-by-grid"> <p>Centering</p> </div> <div class="center-by-absolute-parent"> <p class="center-by-absolute-child">Centering</p> </div> <p class="center-by-calc">Centering</p> </body> </html>
.center-by-fixed-width { width: 70px; margin: 0 auto; } .center-by-text-align { text-align: center; } .center-by-unfixed-width { text-align: center; } .center-by-table { display: table; margin: 0 auto; } .center-by-flex { display: flex; justify-content: center; } .center-by-grid { display: grid; justify-content: center; } .center-by-absolute-parent { position: relative; } .center-by-absolute-child { position: absolute; left: 50%; transform: translateX(-50%); } .center-by-calc { width: 70px; margin-left: calc(50% - 35px); }
Atas ialah kandungan terperinci Pemusatan - Cabaran CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Menjadikan Peralihan Svelte Khas pertama anda

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres

Animasi dan kesan CSS terbaik di CodeCanyon 2025 (dibayar percuma)
