【CSS】CSS经典布局之居中定位

深碍√TFBOYSˉ_ 2022-06-03 09:16 254阅读 0赞

## 1 水平 ##

水平居中有行内元素和块元素，行内元素有文字、图片、链接等；块元素主要是div、p等block元素。

### 1.1 行内元素 ###

对于行内元素可以使用如下实现水平居中

.blocklist1_1 { text-align: center; }

这种方法对于inline，inline-block，inline-table等都有效。

### 1.2 块元素 ###

对于一个块元素，可以设置其margin-left和margin-right自动，就像这样

.blocklist1_2 .div1 { margin: 0px auto; }

无论块元素的宽度是否已知，都可以实现水平居中。

### 1.3 多个块元素 ###

如果有多个块元素需要水平居中时，有两种办法可以实现。一种是借助inline-block，另一种是借助flex。对于第一种方法可以使用如下方式，设置块元素display:inline-block,其父元素水平居中：

..blocklist1_3 .div1 { text-align: center; }    
    .blocklist1_3 .div1 div { display: inline-block; }

用flex的话需要给块的父元素添加如下样式

.blocklist1_3 .div2 { display: flex; flex-direction: row; justify-content: center; }

## 2 垂直 ##

垂直居中也分有行内元素和块元素，不过相比水平居中，垂直居中这里需要讨论的情况有点多，下面我们一一分析。

### 2.1 行内元素 ###

#### 2.1.1 单行 ####

对于单行的行内元素，我们只需要设置其padding-top和padding-bottom值相等即可

.blocklist2_1_1 .div1 { padding-top: 20px; padding-bottom: 20px; }

如果我们不能设置padding的话，而行内元素的高度(height=50px)已知时，可以设置line-height=height,实现元素的垂直居中

.blocklist2_1_1 .div2 { line-height: 50px; height: 50px; }

#### 2.1.2 多行 ####

对于多行元素我们有四种方式可以实现垂直居中：  
a、可以像上面那样通过设置padding-top和padding-bottom的值相等来实现垂直居中

.blocklist2_1_2 .div1 { padding: 20px 20px; }

b、可以借助vertical-align属性来实现垂直居中

.blocklist2_1_2 .div2 { display: table; }    
    .blocklist2_1_2 .div2>div { display: table-cell; vertical-align: middle; }

c、可以借助flex技术来实现垂直居中，只需添加如下样式

.blocklist2_1_2 .div3 { display: flex; justify-content: center; flex-direction: column; height: 400px; }

d、将一个全高度的伪元素放置在容器内，然后设置文本垂直对齐

.blocklist2_1_2 .div4 { position:relative; }    
    .blocklist2_1_2 .div4::before { content: ' '; display: inline-block; height: 100%; width: 1%; vertical-align: middle; }    
    .blocklist2_1_2 .div4>div { display: inline-block; vertical-align: middle; }

### 2.2 块元素 ###

#### 2.2.1 块元素高度已知 ####

在网页布局中有的时候我们知道元素的高度，有的时候我们不知道。对于已知高度的块元素可以这样设置来实现垂直居中

.blocklist2_2_1 .div {    
        position: relative;    
    }   
    .blocklist2_2_1 .div div {    
        position: absoulte;
        top: 50%;    
        height: 100px;
        margin-top: -70px; //这里70px是height*1/2 + padding 
        padding: 20px;    
    }

#### 2.2.2 块元素高度未知 ####

有时候我们是不知道块元素的高度的，这时候可以使用transform来实现

.blocklist2_2_2 .div { position: relative; }    
    .blocklist2_2_2 .div div { transform: translateY(-50%); top: 50%; position: absoulte; }

#### 2.2.3 利用flex实现 ####

除了以上两种办法，还可以使用flex实现

.blocklist2_2_3 .div { display: flex; flex-direction: column; justify-content: center; }

## 3 水平垂直 ##

有的时候我们不仅希望水平居中还希望垂直居中，可以结合以上提到的例子进行组合实现，主要分为以下三个方面：

### 3.1 元素高度、宽度已知 ###

当元素高度和宽度已知时，可以将元素绝对定位，偏移中心50%，然后使用负的margin值实现，如下

.blocklist3_1 .div {    
        position: relative;    
    }    
    .blocklist3_1 .div div {    
        position: absoulte;
        top: 50%;    
        left: 50%;    
        margin: -120px 0px 0px -220px;    //height一半，width一半，另外加上padding值
        height: 200px;    
        width: 400px;    
        padding: 20px;    
    }

### 3.2 元素高度、宽度未知 ###

如果元素的高度和宽度未知呢，我们可以使用变换属性，在两个方向赋予50%的负值，如下

.blocklist3_2 .div { position: relative; }    
    .blocklist3_2 .div div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

### 3.3 利用flexbox实现 ###

用flex实现时需要使用两个中心属性

.blocklist3_3 .div { display: flex; justify-content: center; flex-direction: column; align-items: center; }

### 3.4 利用grid实现 ###

这只是一个小技巧（由Lance Janssen发送），它将对一个元素起作用：

body, html{
        height: 100%;
        display: grid;
    }
    span{
        margin: auto;
    }
    _ _ _ _ _ _
    <body>
        <span>I'm centered!<span>
    </body>

翻译自：[https://css-tricks.com/centering-css-complete-guide/][https_css-tricks.com_centering-css-complete-guide]

--------------------

实现如 [示例图（点击打开）][Link 1] 的效果  
灰色元素水平垂直居中，有两个四分之一圆位于其左上角和右下角。

<!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> .main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ccc; overflow: hidden; width: 400px; height: 200px; } .left-top { position: absolute; width: 100px; height: 100px; background-color: #fc0; top: -50px; left: -50px; border-radius: 50%; } .right-bottom { position: absolute; width: 100px; height: 100px; background-color: #fc0; bottom: -50px; right: -50px; border-radius: 50%; } </style>
    </head>
    <body>
        <div class="main">
            <div class="left-top"></div>
            <div class="right-bottom"></div>
        </div>
    </body>
    </html>

[https_css-tricks.com_centering-css-complete-guide]: https://css-tricks.com/centering-css-complete-guide/
[Link 1]: http://7xrp04.com1.z0.glb.clouddn.com/task_1_4_1.png