css居中方案

最新推荐文章于 2024-09-14 08:45:00 发布

技术蹭蹭蹭

最新推荐文章于 2024-09-14 08:45:00 发布

阅读量130

点赞数

分类专栏： html 文章标签： css linq html

本文链接：https://blog.csdn.net/m6140/article/details/124609842

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍了多种CSS实现元素垂直和水平居中的方法，包括line-height、vertical-align、padding、margin、absolute定位、grid布局和flex布局等。每种方法都有其优缺点和适用场景，适合前端开发者参考和使用。

摘要由CSDN通过智能技术生成

### 如何使元素垂直并居中？

模型：父盒---子盒----子盒内容

常说的居中分2种情况：

1. 盒子居中。

2. 文字居中（也叫内容居中）文字可以转行内块。

与行内块息息相关的属性：

text-align: center;

line-height: 300px;

vertical-align: middle;

居中布局也分2种情况：

1. 2个盒子，大盒套小盒，小盒居中。（本文以这种为主）

2. 1个盒子，内容居中。（标记文字居中）

一般情况下，能把盒子居中，文字就能居中。

例外的情况是有些属性只能居中文字。

本文方法默认是盒子居中，文字居中需标记

**适用于 单行文字居中 的方法：**
```css
    /* 第1种 line-height */
    /* 【本质】居中模型：父容器高，（子容器高，子内容行高 ）*/
    /* 以上三者高度必须统一，子容器高一般auto */
    /* 缺点：对多行文字无效 */
    /* 位置：子盒 */
    display: inline;
    text-align: center; 
    line-height: 300px;
```

```css
    /* 第2种 vertical-align（父盒为基准） */
    /* 缺点：子盒文字内容对齐位置偏离,当设置了子盒height时 */
    /* 位置：父盒 */
    text-align: center;
    line-height: 300px;

    /* 位置：子盒 */
    display: inline-block; 
    vertical-align: middle; 
```

```css
    /* 第3种 vertical-align （兄弟为基准） */
    /* 缺点：左右居中效果受限，一旦元素设置宽度接近父元素，可能失效 */
    /* 位置：兄弟元素 */
    .container::after {
     content: '';
     display: inline-block;
     background-color: yellow;
     height: 300px;
     vertical-align: middle;
 }

    /* 位置：子盒 */
    display: inline-block;
    vertical-align: middle; 
    text-align: center;
    /* width: 495px; */
```

**适用于block居中的方法：**
```css
    /* 第1种 padding */
    /* 缺点：改变盒模型 */
    /* 位置：父盒 */
    box-sizing: border-box;
    padding: 150px 250px;

    /* 位置：子盒 */
    transform: translate(-50%,-50%)
```

```css
    /* 第2种 margin */
    /* 【适用场景】左右居中很方便 */
    /* 缺点：父元素需要加border */
    /* 位置：子盒 */
    margin: 150px auto;
    transform: translateY(-50%);
```

```css
    /* 第3种 absolute */
    /* 缺点：脱离文档流 */
    /* 位置：父盒 */
    position: relative;  
  
    /* 位置：子盒 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); 
  
    /* 位置：子盒 */
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto; 
```

```css
    /* 第4种 grid 布局*/
    /* 缺点：学习成本高 */
    /* 位置：父盒 */
    display: grid; 

    /* 位置：子盒 */
    justify-self: center;
    align-self: center;
```

```css
    /* 第5种 flex 布局*/
    /* 【适用场景】居中 */
    /* 位置：父盒 */
    display: flex; 

    /* 位置：子盒 */
    justify-content: center;
    align-items: center;
```

```css
    /* 第6种 table 布局 */
    /* 缺点：比较多，如果不做表格不建议。*/
    /* 位置：父盒 */
    display: table;

    /* 观察子盒背景会将父盒占满 */
    /* 位置：子盒 */
    display: table-cell;
    vertical-align: middle;
    text-align: center;
```