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>

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案

1 個月前 By DDD

Windows 11 KB5054979中的新功能以及如何解決更新問題

3 週前 By DDD

在哪裡可以找到原子中的起重機控制鑰匙卡

1 個月前 By DDD

如何修復KB5055523無法在Windows 11中安裝？

2 週前 By DDD

Inzoi：如何申請學校和大學

3 週前 By DDD

顯示更多

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡

7781

15

Java教學

1644

14

CakePHP 教程

1399

52

Laravel 教程

1296

25

PHP教程

1234

29

顯示更多