css实现水平/垂直居中的方式

我不是女神ヾ 2022-12-20 03:17 101阅读 0赞

水平居中分为块状元素和行内元素，而块状元素又分为定宽块状元素和不定宽块状元素。

1、行内元素水(display: inline)平居中（文本、图片等）是通过给父元素设置 text-align：center；来实现的。

<p style="text-align: center;">行内元素水平居中</p>

2、定宽块状元素(dispaly: block)水平居中（块状元素的width是一个固定值），满足块状和定宽两个条件时，即可通过给自己设置“左右margin为auto”来实现。

<div style="width: 200px; text-align: center; margin: 0 auto;">定宽块状元素水平居中</div>

3、不定宽块状元素水平居中

1) 改变块状元素的 dispaly 属性为 inline， 然后给父级设置 text-aline：center 来实现水平居中， 这种方法的缺点是不能再给元素设置宽高了

<div style="text-align: center;">
           <div style="display: inline;">不定宽块状元素水平居中</div>        
    </div>

2) 利用绝对定位，让元素向右偏移50%，然后再向左偏移自身的50%

<div style="position: absolute; left: 50%; transform: translateX(-50%);">不定宽块状元素水平居中</div>

3) 利用flex实现水平居中（一）

<div style="display: flex;">
         <div style="margin: 20px auto;">不定宽块状元素水平居中</div>
    </div>

4) 利用flex实现水平居中（二）CSS3的fit-content配合左右margin为auto实现水平居中方法

<div style="width: fit-content; margin-left: auto; margin-right: auto;">不定宽块状元素水平居中</div>

**1.text-align:center**  ** **块状元素，水平居中

**2.margin:0 auto**  **水平居中    **以外边框为参照物，上下外边框距为0，左右外边框距浏览器会自动计算平分

**3.line-height**  **垂直居中**     通过设置行间距。line-height只适用于单行文本的元素，多行元素不适用。

4.**float属性+relative定位 **  给父元素设置float：left ,然后父元素整体向左移动50%（position:relative;left:50%），这时父元素要清除浮动（clear：both）,然后再给子元素整体向左移动50%(position:relative;left:-50%)

**5.根据绝对定位absolute+margin实现水平居中**    给父元素一个相对定位relative，利用绝对定位absolute，配合margin：auto自动计算外边距（position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;）。相对于相对应于relative的绝对定位absolute，需要定宽。relative只是为了给子元素定位用的

**6.使用absolute绝对定位+translate 移动转换，实现水平垂直居中 **    使用百分比来绝对定位一个元素，并配合使用translate，将元素移动定位居中（position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)）。

**7.利用table布局，默认垂直居中（vertical-align:middle）** 如果不是table布局的话可以：**仿table（display：table-cell）**,一样使用vertical-align:middle实现居中对齐

**8.flex布局**   父元素使用display：flex,设置其属性justify-content.align-items都为center(display: flex; justify-content: center; align-items: center),实现水平居中

**9.flex布局+margin **   父元素使用flex布局（display：flex）,子元素使用margin：auto