這是我參與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. 不定寬高

把水平居中或者垂直居中分開討論