【CSS】元素居中问题

【CSS】元素居中问题

一、水平居中

1、行内元素

1. text-align: center

   在其父元素设置text-align: center就可以使其水平居中。如果父元素不是块级元素，则先将父元素转为行内块级元素，利用display: inline-block

   .outer{
       width: 400px;
       height: 300px;
       background-color: lightgreen;
       display: inline-block;/*父元素不是块级元素时设置*/
       text-align: center;
   }
   

2、块级元素

1. margin:0 auto

   子元素宽度已知，直接在子元素设置margin: 0 auto

   .inner{
       width: 100px;
       margin: 0 auto;/*auto会使得左右外边距铺满父元素*/
   }
   

2. table + margin

   将子元素设置为块级表格元素，其宽度由内容决定，然后设置margin:0 auto

   .inner{
       display: table;/*其宽度由内容决定*/
       margin:0 auto;
   }
   

3. flex + justify-content

   父元素设置为弹性容器，再使用justify-content

   .outer{
       display: flex;/*设置为弹性容器，默认主轴方向为从左向右*/
       justify-content: center;/*主轴方向居中*/
   }
   

4. text-align + inline-block

   子元素设置为行内块级元素，父元素设置居中

   .outer{
       text-align: center;
   }
   .inner{
       display: inline-block;/*行内块级元素，具有行内元素属性的块级元素*/
   }
   

5. position + margin-left

   子元素宽度已知，设置父相子绝，然后让子元素往右移动父元素宽度的50%，再往左移动子元素宽度的一半

   .outer{
       position: relative;/*父相子绝*/
   }
   .inner{
       width: 100px;/*已知子元素宽度*/
       position: absolute;
       left: 50%;/*父元素宽度的一半*/
       margin-left: -50px;/*子元素宽度的一半*/
   }
   

   注意： 如果只设置left:50%，此时子元素左边框居中，所以要反向移动子元素宽度一半的距离，使得子元素中心居中

6. position + translateX

   设置父相子绝，然后让子元素往右移动父元素宽度的50%，再往左移动子元素宽度的一半

   .outer{
       position: relative;
   }
   .inner{
       position: absolute;
       left: 50%;
       transform: translateX(-50%);/*子元素宽度已知或未知都能使用*/
   }
   

二、垂直居中

1、行内元素

1. line-height + height

   单行文字实现垂直居中，父元素设置line-height = height

   .outer{
       height: 300px;
       line-height: 300px;   
   }
   

   如果是多行文字实现垂直居中，则需要将子元素转为行内块级元素，然后设置vertical-align: middle和line-height

   .outer{
       height: 300px;
       line-height: 300px;
   }
   .inner{
       display: inline-block;
       line-height: 20px;/*抵消父元素的line-height*/
       vertical-align: middle;
   }
   

2. table-cell + vertical-align

   父元素设置display: table-cell和vertical-align: middle

   .outer{
       display: table-cell;
       vertical-align: middle;
   }
   

3. flex + align-items

   设置父元素为弹性容器，然后设置交叉轴方向居中

   .outer{
       display: flex;
       align-items: center;/*交叉轴方向居中*/
   }
   

2、块级元素

1. position + margin-top

   子元素高度已知，设置父相子绝，然后向下移动父元素高度的一半，再向上移动子元素高度的一半

   .outer{
       position: relative;
   }
   .inner{
       height: 30px;
       position: absolute;
       top: 50%;/*向下移动父元素高度的一半*/
       margin-top: -15px;/*向上移动子元素高度的一半*/
   }
   

2. position + translateY

   设置父相子绝，然后向下移动父元素高度的一半，再向上移动子元素高度的一半

   .outer{
       position: relative;
   }
   .inner{
       position: absolute;
       top: 50%;/*向下移动父元素高度的一半*/
       transform: translateY(-50%);/*向上移动子元素高度的一半*/
   }
   

3. flex + align-items

   父元素设置为弹性容器，再使用align-item

   .outer{
       display: flex;
       align-items: center;
   }
   

4. table-cell + vertical-align

   父元素设置display: table-cell和vertical-align: middle

   .outer{
       display: table-cell;
       vertical-align: middle;
   }
   

三、水平垂直居中

1、行内元素

1. line-heignt + height + text-align

   父元素运用水平和垂直居中设置

   .outer{
       height: 300px;
       line-height: 300px;
       text-align: center;
   }
   

   文字超过一行时，让子元素成为行内块级元素（display:inline-block），然后用以下块级元素的方法即可

2、块级元素

1. position + margin

   子元素大小已知，设置父相子绝，然后子元素设置top，bottom，left，right都为0，再设置margin:auto

   .outer{
       position: relative;
   }
   .inner{
       width: 100px;
       height: 100px;
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin: auto;
   }
   

   注意： 子元素距离父元素四周为0时，设置外边距auto，会把外边距平均铺满到父元素四边，达到居中的效果，如果子元素大小未知，用此方法会把子元素拉伸到父元素大小

   还可以改写成以下形式：先让子元素左上角顶点居中，然后再向左上移动子元素宽度高度一半值，使子元素中心居中

   .outer{
       position: relative;
   }
   .inner{
       width: 100px;
       height: 100px;
       position: absolute;
       top: 50%;
       left: 50%;
       margin-top: -50px;
       margin-left: -50px;
   }
   

2. position + translate

   设置父相子绝，然后向右下移动子元素，距离为父元素边长的一半，再向左上移动子元素自身大小一般的距离

   .outer{
       position: relative;
   }
   .inner{
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%);/*此方法子元素大小未知或者已知都能用*/
   }
   

3. flex

   设置父元素为弹性容器，然后再设置主轴和交叉轴居中

   .outer{
       display: flex;
       justify-content: center;
       align-items: center;
   }