绝对定位元素的水平垂直居中的方法
本文主要介绍了绝对定位元素的水平垂直居中的方法，有3种方法可供参考，需要的朋友一起来看下吧
1.css实现居中
缺点：需要提前知道元素的宽度和高度。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%; top: 50%;
border:1px solid #000;
background:red;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>2、css3实现水平垂直居中
注意：无论元素的尺寸是多少，都可以居中。不过IE8以上才兼容这种写法，移动端可忽略。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
border:1px solid #000;
background:red;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>3、margin：auto实现居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border:1px solid #000;
background:red;
margin: auto; /* 有了这个就自动居中了 */
}
</style>
</head>
<body>
<p class="box">
</p>
</body>
</html>更多绝对定位元素的水平垂直居中的方法相关文章请关注PHP中文网！
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat 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
1376
52
Bagaimanakah prestasi kad grafik 3060?
Jan 27, 2024 am 10:36 AM
Ramai pemain sangat ingin tahu tentang kad grafik 3060 dan ingin membeli paparan 3060, tetapi mereka tidak tahu tahap mana RTX 3060 sebenarnya, kad grafik ini juga berada pada tahap yang agak perdana. Apakah tahap kad grafik 3060: Jawapan: Tahap arus perdana. Kad grafik RTX3060 ini sangat popular di kalangan pemain dan juga dijual Ia mempunyai kelebihan unik siri RTX30 dan sangat menjimatkan kos Pemain yang mempunyai keperluan yang lebih tinggi untuk grafik permainan boleh memilih kad grafik ini. Pengenalan pengembangan kad grafik 3060: Kadar bingkai: Ia disukai oleh majoriti pemain Ia mempunyai memori video yang besar sebanyak 12GB dan sangat popular. Dengan 12GB memori video yang besar, ia boleh menjalankan karya agung AAA dengan lancar tanpa sebarang lag, malah kadar bingkai boleh mencapai 60. Nilai untuk wang: ia
Bagaimana untuk menetapkan pemusatan jadual WPS
Mar 19, 2024 pm 09:34 PM
Apabila fungsi WPS menjadi semakin berkuasa, kami menghadapi lebih banyak masalah tentang penggunaan fungsi. Dalam WPS, kita sering menggunakan jadual WPS Jika kita perlu mencetak jadual WPS, untuk menjadikan jadual kelihatan cantik, kita perlu memusatkan meja pada masa ini. Jadi, persoalannya, bagaimana kita hendak memusatkan jadual WPS? Hari ini saya berkongsi tutorial di sini, saya harap ia dapat membantu anda! Butiran langkah: 1. Saya akan menerangkannya melalui operasi praktikal Berikut adalah borang mudah yang saya buat menggunakan borang WPS. 2. Melalui pratonton cetakan, kita dapati bahawa jadual WPS berada di sebelah kiri secara lalai. Bagaimana jika kita mahu memusatkan meja? 3. Pada masa ini, kita perlu mengklik [Layout Halaman] dalam [Bar Alat]
Nilaikan prestasi dan tahap Kirin 9000s
Mar 18, 2024 pm 03:21 PM
Sebagai bintang baharu dalam pasaran telefon bimbit tahun ini, Kirin 9000s telah menarik perhatian ramai. Memandangkan persaingan dalam pasaran telefon pintar menjadi semakin sengit, sebagai pemproses utama Huawei, siri Kirin sentiasa menarik perhatian ramai. Sebagai pemproses terkini, bagaimanakah prestasi Kirin 9000s Apakah prestasi dan tahapnya? Berikut akan menilai Kirin 9000s dan menganalisis kelebihan dan kekurangannya dari pelbagai aspek. Pertama sekali, dari perspektif prestasi, Kirin 9000s dihasilkan menggunakan proses 5nm termaju dan menyepadukan Co terbaru ARM
Bagaimana untuk memusatkan div di dalam div lain?
Sep 08, 2023 am 11:13 AM
Pengenalan Penjajaran pusat div ialah salah satu aspek terpenting dalam pembangunan bahagian hadapan. Dalam artikel ini, kita akan melihat teknik meletakkan satu div di dalam div lain menggunakan HTML dan CSS. Dalam tutorial ini kita akan mempunyai div ibu bapa yang sepatutnya mempunyai div anak. Tugas kami ialah meletakkan div anak di tengah div induk. Menggunakan terjemahan Transform dan sintaks kedudukan ini bukanlah cara yang sangat popular untuk menyelaraskan satu div ke dalam sintaks div lain kiri:50%;atas:50%;Transform:translate(-50%,-50%);atas Sintaks melakukan berikut - Peraturan CSS "left:50%;" menetapkan kedudukan mendatar elemen kepada
Cara-cara: Bagaimana untuk mengubah saiz dan memusatkan ikon bar tugas Win11
Jan 03, 2024 am 08:17 AM
Win11 membawa antara muka yang serba baharu, termasuk perubahan pada bar tugas Walau bagaimanapun, ramai pengguna merasakan bahawa ikon bar tugas terlalu besar dan tidak digunakan untuk menggunakannya Atas sebab ini, perkara berikut akan membawa anda perubahan ikon bar tugas berpusatkan win11 Datang dan pelajari kaedah operasi kecil bersama-sama. Bagaimana untuk menjadikan ikon bar tugas tengah lebih kecil dalam win11: 1. Pertama, anda perlu membuka editor pendaftaran. 2. Kemudian kembangkan: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced\. 3. Kemudian buat nilai DWORD baharu "TaskbarSi" di sebelah kanan, dan tambah
Buat bahagian boleh tatal mendatar dalam CSS
Aug 29, 2023 am 09:29 AM
Bahagian boleh tatal secara mendatar ialah corak reka bentuk web biasa yang digunakan untuk memaparkan kandungan yang melebihi lebar port pandangan. Corak reka bentuk ini membolehkan pengguna menatal secara mendatar, menyediakan cara yang unik dan menarik untuk memaparkan imej besar, galeri, garis masa, peta dan kandungan lain. Ini dicapai dengan menggunakan sifat CSS seperti overflow−x:auto atau overflow−x:scroll. Ini menggunakan fungsi penyemak imbas asli untuk menatal mendatar dan responsif merentas peranti. Membenarkan navigasi mudah dan penerokaan kandungan. Ia tidak memerlukan sebarang perpustakaan atau pemalam tambahan. Algoritma menggunakan kelas "bekas" untuk menentukan elemen kontena. Tetapkan sifat "overflow−x" bekas kepada "auto" untuk mendayakan penatalan mendatar. bekas
Bagaimana untuk memusatkan kotak teks dalam HTML
Feb 19, 2024 pm 11:01 PM
Cara memusatkan kotak teks HTML memerlukan contoh kod khusus Dalam reka bentuk web, elemen penjajaran tengah adalah keperluan susun atur biasa. Untuk kotak teks HTML, terdapat beberapa cara untuk menjadikannya kelihatan berpusat. Berikut akan memperkenalkan anda kepada kaedah pemusatan yang biasa digunakan secara terperinci, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan atribut pemusatan dalam helaian gaya CSS Untuk mencapai paparan berpusat kotak teks, anda boleh menggunakan atribut penjajaran teks dalam helaian gaya CSS. Tetapkan elemen bekas induk tempat kotak teks terletak kepada penjajaran tengah.
Bilangan segmen garisan mendatar atau menegak yang diperlukan untuk menyambung 3 titik
Aug 25, 2023 pm 04:49 PM
Katakan bahawa diberikan tiga titik (atau koordinat) yang berbeza, anda ingin mencari bilangan segmen garis mendatar atau menegak yang boleh dibentuk dengan menyambungkan tiga titik ini. Segmen garisan sedemikian juga dipanggil polylines. Untuk menyelesaikan masalah ini, anda memerlukan konsep geometri pengiraan. Dalam artikel ini, kita akan membincangkan pelbagai cara untuk menyelesaikan masalah ini dalam C++. Senario input dan output mengandaikan bahawa c1, c2 dan c3 ialah koordinat 3 titik pada satah Cartes. Bilangan segmen garisan mendatar atau menegak yang menghubungkan 3 titik ini adalah seperti yang ditunjukkan di bawah. Input:c1=(-1,-1),c2=(-2,3),c3=(4,3)Output:1Input:c1=(1,-1),c2=(1,3),c3 =(4,3)Output:2Input:c1=
