利用css3元素居中显示及相关属性分享
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进行水平居中显示
水平居中显示
进行居中设置的CSS样式
```css
div{
width:200px;/*定宽*/
margin:20px auto;
margin-left
margin-right设置为auto
}
②当不确定子元素宽度的情况
不定宽块状元素的居中显示
不定宽块状元素指的是宽度width不固定的块状元素
不定宽块状元素的水平居中设置方法有：
（1）使用table标签
（2）将显示类型设置为行内元素，使用display:line进行设置
（3）利用相对定位的方式，将元素向左移动50%，即设置position:relative和left:50%
transform：translate（x,y）法
五、 总结：
一般比较好用的居中方法就是定位加外边距来实现，text-alian水平居中和 line-height垂直居中属性最为常用。
在网页布局中，当我们既需要水平居中，而且还需要垂直居中，就可以把垂直和水平的相结合使用，从而实现上下左右全居中显示的效果。