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>

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7612

15

CakePHP Tutorial

1387

52

What is the format of the account name of steam

88

11

win11 activation key permanent

68

19

nyt connections hints and answers

29

136

Show More