这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战javascript

居中问题(重点)

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

常见的居中分不少中,好比水平居中,垂直居中,水平垂直居中,定宽高和不定宽高,咱们分定宽高和不定宽高来讨论水平垂直居中的几种方式java

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>

复制代码

定位+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>

复制代码

定位+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>

复制代码

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;

        }


复制代码

grid布局 margin: auto;

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

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

复制代码

2. 不定宽高

绝对定位 + 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>

复制代码

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;
            
        }

复制代码

flex布局

.container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
           
            background: red;
        }

复制代码

flex + margin:auto

.container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: flex;
            
        }
        p{
            margin: auto;
            background: red;
        }

复制代码

grid + flex布局

.container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
            
        }
        p{
            
            background: red;
            align-self: center;
            justify-self: center;
        }

复制代码

gird + margin布局

.container{
            margin: 30px;
            height: 400px;
            width: 400px;
            background: lightblue;
            display: grid;
            
        }
        p{
            
            background: red;
            margin: auto;
        }

复制代码

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

1、内联元素居中布局web

水平居中面试

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

垂直居中app

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

2、块级元素居中布局post

水平居中学习

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

垂直居中

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

css经常使用总结-超全的居中分类总结

居中问题(重点)

1.定宽高

2. 不定宽高

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