您的位置：首页 > Web前端 > CSS

CSS布局——水平垂直居中布局总结学习

2016-06-13 23:09 711 查看


简介

CSS布局可以分为几大块，

盒子内部布局

·文本布局

·盒模型本身的布局
盒子之间的布局

·脱离正常流的布局

·absolute布局上下文下的布局

·float布局上下文下的布局

·正常流下的盒子布局

BFC布局上下文下的布局

IFC布局上下文的布局

table布局上下文下的布局

cssgrid布局上下文下的布局


具体内容


一、文本的水平垂直居中

line-height+text-align:center
<divclass='wrap'>
水平垂直居中水平垂直居中
</div>
[/code]
html,body{
margin:0;
}
.wrap{
line-height:400px;
text-align:center;
height:400px;
font-size:36px;
background-color:#ccc;
}
[/code]

*适用范围：单行文字的水平垂直居中

二、利用盒模型的水平垂直居中、

1、padding填充
<divclass="wrap">
<divclass="content"></div>
</div>
[/code]
@wrapWidth:400px;
.wrap{
margin-left:auto;
margin-right:auto;
margin-top:20px;
width:@wrapWidth;
height:@wrapWidth;
background-color:#ccc;
}
.content{
@contentWidth:100px;
width:@contentWidth;
height:@contentWidth;
padding:(@wrapWidth-@contentWidth)/2;
background-color:#333;
background-clip:content-box;
}
[/code]

2、margin填充
<divclass="wrap">
<divclass="ele"></div>
</div>
[/code]
.wrap{
@wrapHeight:400px;
@contenHeight:100px;
overflow:hidden;
width:100%;
height:@wrapHeight;
background-color:#ccc;
.ele{
margin-left:auto;
margin-right:auto;
margin-top:(@wrapHeight-@contenHeight)/2;
width:100px;
height:@contenHeight;
background-color:#333;
color:#fff;
}
}
[/code]

使用margin填充需要知道元素的宽度，这点不太灵活，不过css3出了一个fit-content的属性值，可以动态计算元素的宽度。

三、absolute布局上下文下的水平垂直居中

1、50%+-50%
原理很简单，就是利用left：50%将盒子的左边先置于父容器的中点，然后再将盒子往左边偏移盒子自身宽度的50%，这里有三种具体的实现方式：
<divclass="wrap">
<divclass="elemargin">水平垂直居中水平垂直<br>居中水平垂直居中水平<br>垂直居中水平垂直居<br>中水平垂直居中</div>
</div>
<divclass="wrap">
<divclass="eletranslate">水平垂直居中水平垂直<br>居中水平垂直居中水平<br>垂直居中水平垂直居<br>中水平垂直居中</div>
</div>
<divclass="wrap">
<divclass="elerelative">
<divclass="ele-inner">水平垂直居中水平垂直<br>居中水平垂直居中水平<br>垂直居中水平垂直居<br>中水平垂直居中</div>
</div>
</div>
[/code]
.wrap{
position:relative;
width:100%;
height:200px;
border:1pxsolid;
background-color:#ccc;
.ele{
position:absolute;
left:50%;
top:50%;
background-color:#333;
&.margin{
width:160px;
height:100px;
margin-left:-80px;
margin-top:-50px;
}
&.translate{
-webkit-transform:translate3d(-50%,-50%,0);
transform:translate3d(-50%,-50%,0);
}
.ele-inner{
position:relative;
left:-50%;
top:-50%;
width:100%;
height:100%;
background-color:#333;
}
&.relative{
width:150px;
height:100px;
background-color:transparent;
}
}
}
[/code]

上面的方法中，margin方法和relative方法都需要知道元素的宽高才行（relative方法只知道高也行），适用于固定式布局，而transform方法则可以不知道元素宽度。

2、text-align:center+absolute
text-align:center本来是不能直接作用于absolute元素的，但是没有给其left等值的行级absolute元素是会受到文本的影响的。
<divclass="wrap">
<divclass="ele"></div>
</div>
[/code]
.wrap{
text-align:center;
width:100%;
height:400px;
background-color:#ccc;
font-size:0;
}
.ele{
position:absolute;
margin-left:-(100px/2);
margin-top:(400px-100px)/2;
width:100px;
height:100px;
display:inline-block;
background-color:#333;
}
[/code]

理解：text-align:center作用的是文本而不是absolute的元素，但是absolute元素为inline-block的时候，它会收到文本的影响，表面上看，这里没有文本，但是，实际上这里是有一个匿名的文本节点。这个匿名文本受到text-align影响居中了，这个时候absolute盒子的左边跟父容器的中点对齐了，所有就还需要往回移动50%，这里用的是margin-left。垂直方向是不能被操作文本的属性影响的，这里用margin-top偏移。

3、absolute+margin:auto
<divclass="wrap">
<divclass="ele"></div>
</div>
[/code]
html,body{
width:100%;
height:100%;
margin:0;
}
.wrap{
position:relative;
width:100%;
height:100%;
background-color:#ccc;
}
.ele{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
width:100px;
height:100px;
background-color:#333;
}
[/code]

对于absolute性质的盒子，它的包含块，即上例中类名为wrap的块的宽度等于——absolute盒模型的宽度+left+right的值，包含块的高度也是同理。让left与right为0，width为定值，margin为auto，margin-left与margin-right就会平分除去宽度剩下的宽度，让左右两边相等，达到居中。垂直方向同样道理。

这种方法能简单的做到居中，但是必须有width和height的值。

4、适用于图片居中的一个方法
<divclass="wrap">
<p>
<imgsrc="http://nec.netease.com/img/s/1.jpg"alt=""/>
<imgsrc="http://nec.netease.com/img/s/1.jpg"alt=""/>
</p>
</div>
[/code]
html,body{
width:100%;
height:100%;
margin:0;
}
.wrap{
position:relative;
width:100%;
height:100%;
}
p{
position:absolute;
left:50%;
top:50%;
}
img:nth-child(1){
position:static;
visibility:hidden;
}
img:nth-child(2){
position:absolute;
right:50%;
bottom:50%;
}
[/code]

这种方法主要是利用一个图片进行占位，让父容器获得高宽，从而让偏移的图片有一个参照容器做百分比计算。优点是可以不知道图片的大小，随便放张尺寸不超过父容器的图片都能做到居中。另外，兼容性好。

四、float布局上下文下的水平垂直居中

1、float+-50%
<divclass="wrap">
<divclass="ele">
<divclass="ele-inner">居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中居<br>中居中居中居中居中居中居中居中居中居<br>中居中居中居中居中居中居中</div>
</div>
</div>
[/code]
.wrap{
float:left;
width:100%;
height:400px;
background-color:#ccc;
.ele{
float:left;
position:relative;
left:50%;
top:50%;
}
.ele-inner{
position:relative;
left:-50%;
-webkit-transform:translate3d(0,-50%,0);
transform:translate3d(0,-50%,0);
background-color:#333;
color:#fff;
}
}
[/code]

这种方法的原理是利用float属性将需要居中的元素的父元素.ele的宽度收缩，然后left:50%将.ele的左边和水平中线对齐，这个时候还没居中，还需要将其往回拉自身宽度的50%，于是.ele-inner表示真正需要水平居中的元素。它的position为relative，将其往回拉自身宽度的50%就可以了。对于垂直方向，依然是先将.eletop:50%到垂直方向中点，但是这是给.ele-innertop:50%是不起作用的，因为如果没给父元素明确高度的话，这个50%是计算不出来的，因此，就有了transform:translate3d(0,-50%,0).

2、margin-bottom:-50%
<divclass="wrap">
<divclass="placeholder"></div>
<divclass='content'></div>
</div>
[/code]
.wrap{
float:left;
width:100%;
height:400px;
background-color:#ccc;
@contentHeight:100px;
.placeholder{
float:left;
width:100%;
height:50%;
/*居中元素.content高度一半*/
margin-bottom:-(@contentHeight/2);
}
.content{
position:relative;
left:50%;
transform:translate3d(-50%,0,0);
clear:both;
/*演示用，实际不需要定宽*/
max-width:100px;
height:@contentHeight;
background-color:#333;
}
}
[/code]

先让占位元素placeholder占据50%高度，然后给一个居中元素高度一半的负的margin-bottom,然后下面的元素只要跟着摆放救恩那个垂直居中了。水平方向就是利用translate做偏移。

五、BFC布局上下文下的水平垂直居中
详细介绍的传送门：http://div.io/topic/834?page=1#3261

六、IFC布局上下文下的水平垂直居中
display为inline性质的行级元素的布局。

1、text-align:center+vertical:middle
<divclass="wrap">
<divclass='placeholder'><!--占位元素，用来作为居中元素的参照物--></div>
<divclass="ele"></div>
</div>
[/code]
.wrap{
width:100%;
height:400px;
/*min-height:400px;*/
text-align:center;
font-size:0;
background-color:#ccc;
.placeholder,
.ele{
vertical-align:middle;
display:inline-block;
}
.placeholder{
overflow:hidden;
width:0;
min-height:inherit;
height:inherit;
}
.ele{
width:100px;
height:100px;
background-color:#333;
}
}
[/code]

首先text-align:center让inline-block水平居中，然后给vertical-align:middle,但是仅仅给vertical-align:middle是不够的，因为此时还没有vertical-align对齐的参照物，所以就给了一个占位的inline-block，它的高度是100%。

2、text-align:center+line-height
<divclass="wrap">
<divclass="ele">居中居中居中居中居中居中<br>居中居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中</div>
</div>
[/code]
.wrap{
text-align:center;
line-height:400px;
width:100%;
height:400px;
background-color:#ccc;
font-size:0;
.ele{
line-height:normal;
vertical-align:middle;
display:inline-block;
background-color:#333;
font-size:18px;
color:#fff;
}
}
[/code]

这个方法水平方向是，text-align:center就行了，至于垂直方向，起作用的就是父容器的一个line-height和居中元素的vertical-align:middle，为什么这两个属性可以让一个inline-block迟滞居中呢，这里重点是父容器在其下面产生了一个隐匿的文本节点。这个文本节点会因line-height属性的作用而拥有了一个父容器一样高的行高，此时元素有了一个vertical-align对齐的参照物，再给其vertical-align:middle值就能垂直对齐了。

3、text-align:center+font-size
<divclass="wrap">
<divclass="ele"></div>
</div>
[/code]
.wrap{
text-align:center;
font-size:400px*0.873;/*约为高度的0.873*/
margin-left:auto;
margin-right:auto;
width:400px;
height:400px;
background-color:#ccc;
.ele{
vertical-align:middle;
width:100px;
height:100px;
display:inline-block;
background-color:#333;
}
}
[/code]

这个方法就是将line-height换成了font-size.

七、FFC布局上下文下的水平垂直居中

1、父元素、子元素都定义flex
<divclass="wrap">
<divclass="ele">
居中居中居中居中居中居中居中<br>
居中居中居中居中居中居中居中<br>
居中居中居中居中居中居中居中<br>
居中居中居中居中居中居中居中<br>
居中居中居中居中居中居中居中
</div>
</div>
[/code]
html,body{
width:100%;
height:100%;
}
.wrap{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
background-color:#ccc;
.ele{
background-color:#333;
}
}
[/code]

2、只有父元素定义flex，子元素定义margin:auto
<divclass="wrap">
<divclass="ele">
居中居中居中居中居中居中居中<br>
居中居中居中居中居中居中居中<br>
居中居中居中居中居中居中居中<br>
居中居中居中居中居中居中居中<br>
居中居中居中居中居中居中居中
</div>
</div>
[/code]
html,body{
width:100%;
height:100%;
}
.wrap{
display:flex;
width:100%;
height:100%;
background-color:#ccc;
.ele{
margin:auto;
background-color:#333;
}
}
[/code]

margin:auto在这里垂直方向也生效了。

八、table布局上下文下的水平垂直居中
<divclass='wrap'>
<divclass='ele'>
<divclass="ele-inner">居中居中居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中居中居中</div>
</div>
</div>
[/code]
.wrap{
width:100%;
height:300px;
display:table;
background-color:#ccc;
}
.ele{
text-align:center;
vertical-align:middle;
display:table-cell;
}
.ele-inner{
display:inline-block;
background-color:#333;
}
[/code]

原理是把div模拟成表格，然后给那几个属性就可以了。

九、CSSgrid布局上下文下的水平垂直居中

十、button标签居中
<button>
<div>
居中居中居中居中居中居中<br>
居中居中居中居中居中居中<br>
居中居中居中居中居中居中<br>
居中居中居中居中居中居中<br>
</div>
</button>
[/code]
button{
width:100%;
height:400px;
background-color:#cccccc;
border-width:0;
&:focus{
outline:none;
}
div{
display:inline-block;
font-size:18px;
background-color:#333;
color:#fff;
}
}
[/code]

黑科技！！
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航