1. div+css-Layout
1.css horizontale und vertikale Zentrierung
Methode 1: Die kompatibelste Methode
.box{ position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: auto; width: 200px; height: 200px; background-color: #eee; }
Methode 2: CSS3-Transformationsattribute
.box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: #eee; }
Methode 3: Nur Flex IE11 unterstützt die Verwendung von mdn zum Anzeigen der Kompatibilitäts- und Anwendungsbeispiele von Attributen
display: flex; Stellen Sie den übergeordneten Container auf eine flexible Box ein. flex-direction: row ; Definition Die flexiblen Elemente des übergeordneten Containers werden auf der Hauptachse angeordnet.
justify-content: center definiert die Anordnung der flexiblen Elemente auf der Hauptachse X, die hauptsächlich für horizontal zentrierte Textausrichtungselemente verwendet wird:
center; definiert die Anordnung der flexiblen Elemente auf der Y-Seitenachse. Die Anordnungsmethode wird hauptsächlich für vertikal zentrierten mehrzeiligen Text verwendet.
.box-wrapper{ width: 1000px; /*需要给父容器设置宽高*/ height: 1000px; background-color: #e9e9e9; display: flex; /*设置父容器为弹性盒子*/ justify-content: center; /*定义弹性项目在主轴X的排列方式,主要用于水平居中文字*/ align-items: center; /*定义弹性项目在侧轴Y的排列方式,主要用于垂直居中多行文字*/ } .box{ width: 200px; /*弹性盒子的项目*/ height: 200px; background-color: #eee; }
Weitere Artikel zur Zusammenfassung allgemeiner Kenntnisse in CSS-Projekten finden Sie hier Achtung auf die chinesische PHP-Website!