博客

一、水平居中

行内元素

• 1.如果它的父元素是块级元素，直接给父元素设置
  
  text-align:center;
  
  
  css代码：
  
  
  html代码：
  
  
  
  效果：
  
  
• 2.如果它的父元素不是块级元素，就先将父元素设置为块级元素，在设置
  
  text-align:center;
  
  
  css代码：
  
  
  html代码：
  
  
  效果：
  
  

块级元素

• 方法1 使用margin：0 auto； text-align：center；（分宽度是否确定）
  
  
  确定宽度：谁居中，就给谁设置 margin: 0 auto;
  
  
  css代码：
  
  
  html代码：
  
  
  效果：
  
  
  **默认子元素的宽度和父元素一样，需要给子元素设置 display: inline;转换为行内元素，父元素设置 text-align: center; **
  
  css代码：
  
  html代码：
  
  
  效果：
  
  
• 方法2 使用定位
  
  
  设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left：50%； 意思为让子元素的左上角水平居中
  
  
  设置transfrom：translateX(-50%);
  
  css代码以及html代码：
  
  
  
  
  效果：
  
  

二、垂直居中

行内元素

• 单行行内元素
  
  
  设置单行行内元素行高等于盒子的高
  
  
  css代码以及html代码：
  
  
  
  
  效果：
  
  

块级元素

• 使用定位
  
  
  设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top：50%； 让子元素的左上角垂直居中
  
  
  定高度：设置transform:translateY(-50%);
  
  css代码以及html代码：
  
  
  
  

效果：

水平垂直居中

已知高度和宽度的元素

• 设置父元素为相对定位，子元素设置绝对定位，top：0；right：0；bottom：0；left：0；margin：auto；
  
  css代码以及html代码：
  
  
  

效果：

未知高度和宽度的元素

• 使用定位
  
  
  设置父元素为相对定位，子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
  
  
  css代码以及html代码：

效果：