CSS居中的方法

一丶文字居中法(行内元素)

1.水平居中(单行)

给父元素添加一个==text-align: center;==,前提是父元素必须是个块级元素

• HTML

  
      子元素
  
  

• CSS

• 效果

  
  
  1597642800089.png

1.垂直居中(单行)

只需要设置单行行内元素的"行高等于盒子的高"即可

• HTML

  
      子元素
  
  

• CSS

• 效果

1597651802223.png

3.水平垂直居中(单行)

让子元素的行高==line-height: 父元素高度;==和父元素高度相等就可以实现文字垂直居中了

• HTML

  
      子元素
  
  

• CSS

• 效果

1597643398651.png

4.多行的行内元素水平垂直居中

使用给父元素设置==display:table-cell;==和==vertical-align: middle;==属即可；

• HTML

  
      子元素
  
  

• CSS

• 效果

1597652188959.png

二丶图片居中法

1.水平居中

• HTML

• CSS

• 效果

1597644174119.png

2.水平垂直居中

• HTML

• CSS

• 效果

1597644934442.png

三丶块元素居中

1.水平居中

定宽度：**需要谁居中，给其设置 ==margin: 0 auto;== （作用：使盒子自己居中）

• HTML

  
  子元素
  
  

• CSS

• 效果

1597646200063.png

定宽度：**需要谁居中，给其设置 ==margin: 0 auto;== （作用：使盒子自己居中）

• HTML

  
  子元素
  
  

• CSS

• 效果

1597654422580.png

不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;

• HTML

  
      子元素
  
  

• CSS

• 效果

1597646648052.png

四丶position定位居中法

1.水平居中

子绝父相left+margin-left定位居中

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的==left:50%==，即让子元素的左上角水平居中；

定宽度：设置绝对子元素的 ==margin-left:==-元素宽度的一半px;

• HTML

  
  子元素
  
  

• CSS

• 效果

1597648150275.png

子绝父相left+transform定位居中

不定宽度：利用css3新增属性==transform: translateX(-50%);==

• HTML

  
  子元素
  
  

• CSS

• 效果

1597648150275.png

2.垂直居中

子绝父相top+margin-top定位居中

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的==top: 50%==，即让子元素的左上角垂直居中；

定高度：设置绝对子元素的 ==margin-top:== -元素高度的一半px;

• HTML

  
  子元素
  
  

• CSS

• 效果

1597648936473.png

子绝父相top+transform定位居中

不定宽度：利用css3新增属性==transform: translateY(-50%);==

• HTML

  
  子元素
  
  

• CSS

• 效果

1597648936473.png

3.水平垂直居中

设置父元素为相对定位，给子元素设置绝对定位，==top: 0; right: 0; bottom: 0; left: 0; margin: auto;==

• HTML

  
  子元素
  
  

• CSS

• 效果

1597649910034.png

设置父元素为相对定位，给子元素设置绝对定位，==left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;==

• HTML

  
  子元素
  
  

• CSS

• 效果

1597649910034.png

未知元素的高度和宽度:设置父元素为相对定位，给子元素设置绝对定位，==left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);==

• HTML

  
  子元素
  
  

• CSS

• 效果

1597649910034.png

五丶使用flexbox布局实现居中

1.水平居中（宽度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 ==display: flex; justify-content: center;==

• HTML

  
  子元素
  
  

• CSS

• 效果

1597650784327.png

2.垂直居中（高度定不定都可以）

使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 ==display: flex; align-items: center;==

• HTML

  
  子元素
  
  

• CSS

• 效果

1597651125156.png

3.水平垂直居中

设置父元素为flex定位，**justify-content: center; align-items: center;

• HTML

  
  子元素
  
  

• CSS

• 效果

1597651340027.png

六丶元素(空标签)水平垂直居中

• HTML

  
  
      水平垂直居中元素
  
  
  

• CSS

• 效果

1597653699200.png

七丶 CSS3的calc方法水平垂直居中

盒模型的组成

盒模型

什么是calc()

calc()属于CSS3，用于动态计算长度值，可以用在任何一个需要的地方。有了calc()，你可以通过计算来决定一个对象的大小和形状。还可以在一个calc()内部嵌套另一个calc()。妈妈再也不担心我水平垂直居中不了了。

• HTML

  
      
  HTML5
  
  

• CSS

• 效果

  
  
  1597655409832.png

calc()支持程度

calc支持程度