利用css3元素居中显示及相关属性分享

最新推荐文章于 2022-10-01 21:11:27 发布

li_aoqi 的博客

最新推荐文章于 2022-10-01 21:11:27 发布

阅读量2.8k

点赞数 3

分类专栏： css 居中文章标签： html css 定位

本文链接：https://blog.csdn.net/li_aoqi/article/details/113741247

版权

css 居中专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css 元素居中显示及相关属性分享

本周分享
目录

css 元素居中显示及相关属性分享
一、前言：
二、居中显示的分类
三、居中显示的方法及效果
- ①水平居中的方法及效果：
- ②垂直居中的方法及效果：
四、子元素的两种情况
- ①当确定子元素的宽度的情况
- ②当不确定子元素宽度的情况
五、总结：

一、前言：

当使用HTML进行网页布局的时候，经常会把一些元素居中显示在网页中或者父元素当中，那么就会用到一些css属性来定义元素，使其居中显示。当然方法有很多，下面主要分析一下常用（兼容）的一些居中样式方法。

二、居中显示的分类

元素的居中显示主要分为两种：水平居中和垂直居中

水平居中：让元素在水平方向始终保持一个居中位置显示。
垂直居中：让元素在垂直方向显示一个居中的效果。

三、居中显示的方法及效果

①水平居中的方法及效果：

方法一：

代码块;

        div{
            width: 130px;
            height: 130px;
            background-color: blue;
            color: chartreuse;
             margin: 0 auto; 
             }

效果图：在这里插入图片描述
原理：此方法较兼容，margin属性可以在任何情况下，使元素水平居中。表示上下0像素，左右（auto）居中。

方法二： 定位 + margin

代码块：

.fater{
            position:relative;  
            width: 300px;
            height: 300px;
            border: 2px solid red;
        }
.fater div{
           position: absolute;
            width: 130px;
            height: 130px;
            background-color: blue;
            color: chartreuse;
            left: 0;
            right: 0;
            margin: auto;

效果图：
在这里插入图片描述

原理：此方法有无父元素或者任何元素都可以水平居中显示，子元素绝对定位以后，left和right都为0，margin：auto（居中）。

方法三：

text-alian属性：它是将行内元素水平居中显示。适用inline，inline-block,inline-table ,inline-flex等

效果图：在这里插入图片描述

方法四： flex布局

代码块：


.wrapBox2{
    width: 300px;
    height: 300px;
    background: blue;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*注意：即使不设置子元素为行块元素也不会独占一层*/
.wrapItem2{
    width: 100px;
    height: 50px;
    background:green;

原理:将父级元素设置为流式布局，根据flex布局的属性特性，设置子元素居中。flex布局灵活，不需要对子元素进行任何的设置。缺点：子元素的float、clear、position等无法使用，如果有其他布局，容易产生影响。

方法五： 伪元素居中

代码块：

.fater{
    height: 200px;
    text-align: center;
    vertical-align: middle;
}
.child{
    width: 100px;
    height: 100px;
    display: inline-block;
    vertical-align: middle;
}
.fater::before{
    content: "";
    width: 20px;
    height: 200px;
    display: inline-block;
    vertical-align: middle;
}

方法六：

代码块：

  .fater{
            position:relative;  
            width: 300px;
            height: 300px;
            border: 2px solid red;
        }
        .fater div{
           position: absolute;
            width: 130px;
            height: 130px;
            background-color: blue;
            color: chartreuse;
            position: absolute;
            top: 50%;
            left:50%;
            transform: translate(-50% , -50%);
        }

效果图：
在这里插入图片描述

原理：类似于已知宽高的实现方式，只不过当前居中元素宽高未知，所以需要自动获取当前居中元素的宽高。translate属性正好实现了该功能。

②垂直居中的方法及效果：

方法一：

代码块;

        .fater{
            position:relative;  
            width: 300px;
            height: 300px;
            border: 2px solid red;
        }
        .fater div{
           position: absolute;
            width: 130px;
            height: 130px;
            background-color: blue;
            color: chartreuse;
            bottom: 0;
            top:0; 
            margin:auto;
        }

效果图：
在这里插入图片描述
原理：此方法是在定位的基础上，通过 bottom: 0; top:0;两个值，margin居中来实现的。

方法二： line-height(单行文本)

代码块：

.fater{
            width: 300px;
            height: 300px;
            line-height: 300px;
            border: 2px solid red;
        }

效果图：
在这里插入图片描述

原理：有时行内元素或文本能够做到垂直居中，当line-height与height相等是，文字垂直居中。

方法二： table元素
代码块：

.fater{
   
    width: 300px;
    height: 300px;
    border:2px solid red;
}
.fater table{
    width:100%;
    height:100%;
}
.centerWrap{
    text-align: center;
    vertical-align: middle;
}
.centerItem{
    display: inline-block;
    background:pink;
}

原理：使用table标签进行布局，主要还是使用了vertical-align属性和text-align属性。但是相对于上一种方式，使用table标签会产生大量的冗余代码。不推荐使用

四、子元素的两种情况

①当确定子元素的宽度的情况

定宽块状元素的居中显示

定宽块状元素及宽度width为固定值的块状元素，这类元素的水平居中显示可以通过设置左右margin值为auto实现

例如，设置定宽块状元素div进行水平居中显示

<body>

   <div>水平居中显示</div>

</body>

进行居中设置的CSS样式

```css
      div{
            width:200px;/*定宽*/
            margin:20px auto;
            margin-left
            margin-right设置为auto
     }