当使用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垂直居中属性最为常用。
在网页布局中,当我们既需要水平居中,而且还需要垂直居中,就可以把垂直和水平的相结合使用,从而实现上下左右全居中显示的效果。