居中问题(重点)

居中问题真的是老生常谈的话题,基本上每次面试都会被问到,毕竟在样式的时候居中真的无处不在,关于居中的文章网上比比皆是,好好记住4-5种,以后面试跟工作没有任何问题啦

常见的居中分很多中,比如水平居中,垂直居中,水平垂直居中,定宽高和不定宽高,我们分定宽高和不定宽高来讨论水平垂直居中的几种方式

1.定宽高

  1. 定位+margin:auto+left+right+ top+bottom 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
   
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto ;
        }
    </style>
</head>
<body>
    <div class="container">
        <p></p>
    </div>
</body>
</html>
  1. 定位+margin :-50% 
<style>
       .container{
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
   
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px; 
        }
    </style>
</head>
<body>
    <div class="container">
        <p></p>
    </div>
</body>
  1. 定位+transform 
 <style>
        .container{
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
   
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); 
        }
    </style>
  1. flex布局 
  .container {
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        p {
   
            width: 100px;
            height: 100px;
            background: red;

        }
  1. grid布局 margin: auto; 
 .container {
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
        }

        p {
   
            width: 100px;
            height: 100px;
            background: red;
            margin: auto;
        }

2. 不定宽高

  1. 绝对定位 + transform 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            position: relative;
        }
        p{
   
           
            background: red;
            position: absolute;
            top:0;
            bottom: 0;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%); 
        }
    </style>
</head>
<body>
    <div class="container">
        <p>好好学习吧</p>
    </div>
</body>
</html>
  1. table-cell 
.container{
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        p{
   
           
            background: red;
            display: inline-block;
            
        }
  1. flex布局 
.container{
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
   
           
            background: red;
        }
  1. flex + margin:auto 
 .container{
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            
        }
        p{
   
            margin: auto;
            background: red;
        }
  1. grid + flex布局 
.container{
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
            
        }
        p{
   
            
            background: red;
            align-self: center;
            justify-self: center;
        }
  1. gird + margin布局 
.container{
   
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
            
        }
        p{
   
            
            background: red;
            margin: auto;
        }

把水平居中或者垂直居中分开讨论

一、内联元素居中布局

水平居中

行内元素可设置：text-align: center;
flex布局设置父元素：display: flex; justify-content: center;

垂直居中

单行文本父元素确认高度：height === line-height
多行文本父元素确认高度：disaply: table-cell; vertical-align: middle;

二、块级元素居中布局

水平居中

定宽: margin: 0 auto;
不定宽： 参考上诉例子中不定宽高例子。

垂直居中

position: absolute设置left、top、margin-left、margin-to(定高)；
position: fixed设置margin: auto(定高)；
display: table-cell；
transform: translate(x, y)；
flex(不定高，不定宽)；
grid(不定高，不定宽)，兼容性相对比较差；

关于居中的好文的传送门(参考文章)
(免费获取最新完整前端课程关注vx公众号:前端拓路者coder,回复:资料
如果这个文章对你有用的话,欢迎点赞转发关注,让更多的小伙伴看到呀,毕竟分享是一个程序员最基本的美德!!!
如果有不对的请大佬指教)