Heim Web-Frontend CSS-Tutorial So zentrieren Sie horizontal und vertikal absolut positionierte Elemente

So zentrieren Sie horizontal und vertikal absolut positionierte Elemente

Feb 24, 2017 pm 01:35 PM
垂直 Center 水平

In diesem Artikel wird hauptsächlich die Methode der horizontalen und vertikalen Zentrierung absolut positionierter Elemente vorgestellt. Freunde, die sie benötigen, können sich gemeinsam 1.css ansehen, um eine Zentrierung zu erreichen

Nachteile: Breite und Höhe des Elements müssen im Voraus bekannt sein.

<!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>
Nach dem Login kopieren

2. CSS3 erreicht horizontale und vertikale Zentrierung

Hinweis: Egal des Elements Unabhängig von der Größe kann es zentriert werden. Diese Schreibmethode ist jedoch nur mit IE8 und höher kompatibel und kann auf mobilen Endgeräten ignoriert werden.

<!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>
Nach dem Login kopieren

3. Rand: automatische Gerätezentrierung

Weitere verwandte Artikel zu horizontalen und vertikalen Zentrierungsmethoden für absolut positionierte Elemente finden Sie auf der chinesischen PHP-Website!

<!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>
Nach dem Login kopieren

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie ist die Leistung der 3060-Grafikkarte? Wie ist die Leistung der 3060-Grafikkarte? Jan 27, 2024 am 10:36 AM

Viele Gamer sind sehr neugierig auf die Grafikkarte 3060 und möchten ein 3060-Display kaufen, wissen aber nicht, auf welchem ​​Niveau sich die RTX 3060 befindet. Tatsächlich liegt diese Grafikkarte auch auf einem relativ Mainstream-Niveau. Was ist das Niveau der 3060-Grafikkarte: Antwort: Mainstream-Niveau. Diese RTX3060-Grafikkarte erfreut sich bei Spielern großer Beliebtheit und ist ebenfalls im Angebot. Sie verfügt über die einzigartigen Vorteile der RTX30-Serie und ist sehr kostengünstig. Spieler mit höheren Anforderungen an die Spielgrafik können sich für diese Grafikkarte entscheiden. Einführung zur 3060-Grafikkartenerweiterung: Bildrate: Sie wird von den meisten Spielern geliebt. Sie verfügt über einen großen Videospeicher von 12 GB und ist sehr beliebt. Mit 12 GB großem Videospeicher können AAA-Meisterwerke flüssig und ohne Verzögerung wiedergegeben werden, und die Bildrate kann sogar 60 erreichen. Preis-Leistungs-Verhältnis: it

So stellen Sie die WPS-Tabellenzentrierung ein So stellen Sie die WPS-Tabellenzentrierung ein Mar 19, 2024 pm 09:34 PM

Da die Funktionen von WPS immer leistungsfähiger werden, treten bei der Verwendung von Funktionen immer mehr Probleme auf. In WPS verwenden wir häufig WPS-Tabellen. Damit die Tabelle schön aussieht, müssen wir die Tabelle zu diesem Zeitpunkt zentrieren. Die Frage ist also: Wie zentrieren wir die WPS-Tabelle? Heute teile ich hier ein Tutorial, ich hoffe, es kann Ihnen helfen! Schrittdetails: 1. Ich werde es anhand praktischer Vorgänge erklären. Das Folgende ist ein einfaches Formular, das ich mit einem WPS-Formular erstellt habe. 2. Durch die Druckvorschau können wir feststellen, dass sich die WPS-Tabelle standardmäßig auf der linken Seite befindet. Was ist, wenn wir den Tisch zentrieren wollen? 3. Zu diesem Zeitpunkt müssen wir in der [Symbolleiste] auf [Seitenlayout] klicken.

Mar 18, 2024 pm 03:21 PM

Als neuer Star auf dem Mobiltelefonmarkt hat das Kirin 9000s in diesem Jahr viel Aufmerksamkeit auf sich gezogen. Da der Wettbewerb auf dem Smartphone-Markt immer härter wird, hat die Kirin-Serie als Flaggschiff-Prozessor von Huawei schon immer viel Aufmerksamkeit auf sich gezogen. Wie ist die Leistung und das Niveau des Kirin 9000 als neuester Prozessor? Im Folgenden wird der Kirin 9000 bewertet und seine Vor- und Nachteile unter verschiedenen Gesichtspunkten analysiert. Was zunächst die Leistung betrifft, wird der Kirin 9000s in einem fortschrittlichen 5-nm-Prozess hergestellt und integriert die neueste Co. von ARM

Wie zentriere ich ein Div in einem anderen Div? Wie zentriere ich ein Div in einem anderen Div? Sep 08, 2023 am 11:13 AM

Einführung Die zentrale Ausrichtung von Divs ist einer der wichtigsten Aspekte der Front-End-Entwicklung. In diesem Artikel werden wir uns mit der Technik befassen, mit der mithilfe von HTML und CSS ein Div in einem anderen Div platziert wird. In diesem Tutorial werden wir ein übergeordnetes Div haben, das untergeordnete Divs haben sollte. Unsere Aufgabe besteht darin, das untergeordnete Div in der Mitte des übergeordneten Div zu platzieren. Die Verwendung der Transform-Übersetzung und der Positionssyntax ist keine sehr beliebte Methode, um ein Div in einem anderen Div zentriert auszurichten. Syntax left:50%;top:50%;Transform:translate(-50%,-50%);above Die Syntax erledigt das folgende - Die CSS-Regel „left:50%;“ legt die horizontale Position des Elements fest

Anleitung: So ändern Sie die Größe und zentrieren Sie Win11-Taskleistensymbole Anleitung: So ändern Sie die Größe und zentrieren Sie Win11-Taskleistensymbole Jan 03, 2024 am 08:17 AM

Win11 bringt eine völlig neue Benutzeroberfläche mit sich, einschließlich Änderungen an der Taskleiste. Viele Benutzer sind jedoch der Meinung, dass die Taskleistensymbole zu groß sind und sich bei der Verwendung nicht daran gewöhnen . Kommen Sie und lernen Sie gemeinsam die kleinen Operationsmethoden. So verkleinern Sie das mittlere Taskleistensymbol in Win11: 1. Zuerst müssen Sie den Registrierungseditor öffnen. 2. Erweitern Sie dann: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced\. 3. Erstellen Sie dann rechts einen neuen DWORD-Wert „TaskbarSi“ und fügen Sie ihn hinzu

So zentrieren Sie ein Textfeld in HTML So zentrieren Sie ein Textfeld in HTML Feb 19, 2024 pm 11:01 PM

Um ein HTML-Textfeld zu zentrieren, sind spezielle Codebeispiele erforderlich. Im Webdesign ist die Ausrichtung von Elementen in der Mitte eine häufige Layoutanforderung. Für HTML-Textfelder gibt es mehrere Möglichkeiten, sie zentriert anzuzeigen. Im Folgenden stellen wir Ihnen eine häufig verwendete Zentrierungsmethode im Detail vor und fügen spezifische Codebeispiele bei. Methode 1: Verwenden Sie das Attribut „centering“ im CSS-Stylesheet. Um eine zentrierte Anzeige des Textfelds zu erreichen, können Sie das Attribut „text-align“ im CSS-Stylesheet verwenden. Stellen Sie das übergeordnete Containerelement, in dem sich das Textfeld befindet, auf zentrierte Ausrichtung ein.

Erstellen Sie horizontal scrollbare Abschnitte in CSS Erstellen Sie horizontal scrollbare Abschnitte in CSS Aug 29, 2023 am 09:29 AM

Horizontal scrollbare Abschnitte sind ein gängiges Webdesign-Muster, das zur Anzeige von Inhalten verwendet wird, die über die Breite des Ansichtsfensters hinausgehen. Dieses Designmuster ermöglicht Benutzern das horizontale Scrollen und bietet so eine einzigartige und ansprechende Möglichkeit, große Bilder, Galerien, Zeitleisten, Karten und andere Inhalte anzuzeigen. Dies wird durch die Verwendung von CSS-Eigenschaften wie overflow-x:auto oder overflow-x:scroll erreicht. Dies nutzt native Browserfunktionen für horizontales Scrollen und reagiert auf alle Geräte. Ermöglicht eine einfache Navigation und Erkundung von Inhalten. Es sind keine zusätzlichen Bibliotheken oder Plugins erforderlich. Der Algorithmus verwendet die Klasse „Container“, um Containerelemente zu definieren. Setzen Sie die Eigenschaft „overflow-x“ des Containers auf „auto“, um horizontales Scrollen zu ermöglichen. Container

Die Anzahl der horizontalen oder vertikalen Liniensegmente, die zum Verbinden von drei Punkten erforderlich sind Die Anzahl der horizontalen oder vertikalen Liniensegmente, die zum Verbinden von drei Punkten erforderlich sind Aug 25, 2023 pm 04:49 PM

Angenommen, Sie möchten bei gegebenen drei verschiedenen Punkten (oder Koordinaten) die Anzahl der horizontalen oder vertikalen Liniensegmente ermitteln, die durch die Verbindung dieser drei Punkte gebildet werden können. Solche Liniensegmente werden auch Polylinien genannt. Um dieses Problem zu lösen, benötigen Sie das Konzept der Computergeometrie. In diesem Artikel werden wir verschiedene Möglichkeiten zur Lösung dieses Problems in C++ diskutieren. Eingabe- und Ausgabeszenarien gehen davon aus, dass c1, c2 und c3 die Koordinaten von drei Punkten auf der kartesischen Ebene sind. Die Anzahl der horizontalen oder vertikalen Liniensegmente, die diese drei Punkte verbinden, ist wie folgt. Eingabe:c1=(-1,-1),c2=(-2,3),c3=(4,3)Ausgabe:1Eingabe:c1=(1,-1),c2=(1,3),c3 =(4,3)Ausgabe:2Eingabe:c1=

See all articles