CSS实现水平居中的4种思路_html/css_WEB-ITnose-HTML-Tutorial-php.cn

× 目录 [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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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

DEMO

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

【2】配合relative

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

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

【3】配合负margin

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

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Verwandte Etiketten：

CSS实现水平居中的4种思路

Quelle：php.cn

Vorheriger Artikel：网页加载速度优化2先加载css，然后再加载js文件。_html/css_WEB-ITnose Nächster Artikel：JS获取非行间样式及兼容问题_html/css_WEB-ITnose

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

Neueste Artikel des Autors