CSS实现水平居中的4种思路_html/css_WEB-ITnose

× 目录 [1]text-align [2]margin [3]absolute [4]flex

前面的话

　　水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路

 

思路一：在父元素中设置text-align:center实现行内元素水平居中

　　将子元素的display设置为inline-block，使子元素变成行内元素

　　[注意]若要兼容IE7-浏览器，可使用display:inline;zoom:1;来达到inline-block的效果

<style>.parent{text-align: center;}    .child{display: inline-block;}</style>

<div class="parent" style="background-color: gray;">  <div class="child" style="background-color: lightblue;">DEMO</div></div>

思路二：在本身元素设置margin: 0 auto实现块级元素水平居中

【1】将子元素的display为table，使子元素成为块级元素，同时table还具有包裹性，宽度由内容撑开

　　[注意]若要兼容IE7-浏览器，可把child的结构换成

DEMO

<style>.child{    display: table;    margin: 0 auto;}</style>

<div class="parent" style="background-color: gray;">  <div class="child" style="background-color: lightblue;">DEMO</div></div>

【2】若子元素定宽，则可以使用绝对定位的盒模型属性，实现居中效果；若不设置宽度时，子元素被拉伸

<style>.parent{  position: relative;}.child{ position: absolute; left: 0; right: 0; margin: 0 auto; width: 50px;}</style>

<div class="parent" style="background-color: gray;height: 20px;">    <div class="child" style="background-color: lightblue;">DEMO</div>   </div>

思路三: 通过绝对定位的偏移属性实现水平居中

【1】配合translate()位移函数

　　translate函数的百分比是相对于自身宽度的，所以left:50%配合translateX(-50%)可实现居中效果

　　[注意]IE9-浏览器不支持

<style>.parent{  position: relative;}.child{  position: absolute;  left: 50%;  transform:translateX(-50%);}</style>

<div class="parent" style="background-color: gray;height: 20px;">  <div class="child" style="background-color: lightblue;">DEMO</div></div>

【2】配合relative

　　relative的偏移属性是相对于自身的，因为子元素已经被设置为absolute，所以若使用relative，则需要增加一层

结构，使其宽度与子元素宽度相同

　　[注意]该方法全兼容，但是增加了html结构

<style>.parent{  position: relative;}.childWrap{  position: absolute;  left: 50%;}.child{  position: relative;  left: -50%;}</style>

<div class="parent" style="background-color: gray;height: 20px;">  <div class="childWrap">    <div class="child" style="background-color: lightblue;">DEMO</div>   </div>   </div>

【3】配合负margin

　　margin的百分比是相对于包含块的，所以需要增加一层

结构。由于宽度width的默认值是auto，当设置负margin时，width也会随着变大。所以此时需要定宽处理

　　[注意]虽然全兼容，但需要增加页面结构及定宽处理，所以限制了应用场景

<style>.parent{  position: relative;}.childWrap{  position: absolute;  left: 50%;}.child{  width:50px;  margin-left:-50%;}</style>

<div class="parent" style="background-color: gray;height: 20px;">  <div class="childWrap">    <div class="child" style="background-color: lightblue;">DEMO</div>   </div>   </div>

思路四: 使用弹性盒模型flex实现水平居中

　　[注意]IE9-浏览器不支持

【1】在伸缩容器上设置主轴对齐方式jusify-content:center

<style>.parent{  display: flex;  justify-content: center;}</style>

<div class="parent" style="background-color: gray;">    <div class="child" style="background-color: lightblue;">DEMO</div>   </div>

【2】在伸缩项目上设置margin: 0 auto

<style>.parent{display: flex;}.child{margin: 0 auto;}</style>

<div class="parent" style="background-color: gray;">    <div class="child" style="background-color: lightblue;">DEMO</div>   </div>

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

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

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

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Mehr anzeigen

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

3 Wochen vor By DDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

2 Wochen vor By DDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

3 Wochen vor By DDD

<🎜>: Dead Rails - wie man jede Herausforderung abschließt

4 Wochen vor By DDD

Atomfall Guide: Gegenstandsstandorte, Questführer und Tipps

1 Monate vor By DDD

Mehr anzeigen

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mehr anzeigen

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7677

15

CakePHP-Tutorial

1393

52

C#-Tutorial

1207

24

Wie lautet das Format des Kontonamens von Steam?

91

11

Win11 -Aktivierungsschlüssel dauerhaft

73

19

Mehr anzeigen