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

CSS布局——简洁、兼容性强的垂直水平居中方案

2016-06-24 11:04 525 查看


1、absolute，需要知道居中元素的宽与高

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
body{
background-color:goldenrod;
margin:0;
padding:0;
}
p{
color:white;
}
.main{
background-color:saddlebrown;
position:absolute;
top:50%;
left:50%;
width:500px;
height:500px;
margin-left:-250px;
margin-top:-250px;
text-align:center;
}
/*这种方式需要知道居中元素的宽与高！！*/
</style>
</head>
<body>
<divclass="main">
<p>Centermeplease!</p>
</div>
</body>
</html>
[/code]


2、利用css3的calc计算符，可以省两行代码

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
body{
background-color:goldenrod;
margin:0;
padding:0;
}
p{
color:white;
}
.main{
background-color:saddlebrown;
position:absolute;
width:18em;
height:18em;
top:calc(50%-9em);
left:calc(50%-9em);
text-align:center;
}
/*这种方式需要知道居中元素的宽与高！！*/
</style>
</head>
<body>
<divclass="main">
<p>Centermeplease!</p>
</div>
</body>
</html>
[/code]


3、使用transform的translate属性，x和y轴上往回移动50%

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
body{
background-color:goldenrod;
margin:0;
padding:0;
}
p{
color:white;
}
.main{
background-color:saddlebrown;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
}
/*这种方式需要知道居中元素的宽与高！！*/
</style>
</head>
<body>
<divclass="main">
<p>Centermeplease!</p>
<p>Centermeplease!</p>
</div>
</body>
</html>
[/code]


以上的定位都用到了absolute，但是absolute对整个文档流的影响比较大。


4、视窗单位解决方案

不用absolute，就是不能使用top和left。那么，怎么将元素从top和left位置偏移50%的量呢，首先想到了margin，像这样：
.main{
width:18em;
padding:1em1.5em;
margin:50%auto0;
transform:translateY(-50%);
}
[/code]



如上图，结果布局很怪异，主要原因是margin的百分比计算是相对于父容器的width来计算的。父元素的width来计算，是width来计算的。当然，包括margin-top和margin-bottom也是这样的。

这个时候，神奇的viewport-relative就出现了，相对视图长度单位。

vw是相对于视窗的宽度，1vw相当于视图宽度的1%；

1vh相当于视窗高度的1%。

如果视窗的宽度小于高度，
1vmin
等于
1vw
，反之，如果视窗宽度大于高度，
1vmin
等于
1vh

如果视窗的宽度大于高度，
1vmax
等于
1vw
，反之，如果视窗宽度小于高度，
1vmax
等于
1vh


所以，上面的代码就有救了！！！
<head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
body{
background-color:goldenrod;
margin:0;
padding:0;
}
p{
color:white;
}
.main{
width:18em;
background-color:saddlebrown;
margin:50vhauto0auto;
transform:translateY(-50%);
text-align:center;
}
</style>
</head>
<body>
<divclass="main">
<p>Centermeplease!</p>
<p>Centermeplease!</p>
</div>
</body>
[/code]

很完美的解决了这个问题。


5、Flexbox的解决方案

Flexbox的出现就是为了解决这样的问题，所以它无疑是最好的解决方案。唯一可惜的IE8不支持Flexbox，而国内还有相当一部分的IE8用户，全球大概有0.61%。使用Flexbox只需要两个样式，就可以搞定，在父元素上加上disp:flex,在垂直居中的元素上设置margin:auto。当然：父元素上min-height:100vh。

这条属性还是要的，它会影响垂直上的居中。
<head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
body{
background-color:goldenrod;
margin:0;
padding:0;
display:flex;
min-height:100vh;
}
p{
color:white;
}
.main{
background-color:saddlebrown;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<divclass="main">
<p>Centermeplease!</p>
<p>Centermeplease!</p>
</div>
</body>
[/code]

通过align-items和justify-content属性，使设置固定尺寸的main容器里面的文本居中。
<head>
<metacharset="utf-8"/>
<title></title>
<styletype="text/css">
body{
background-color:goldenrod;
margin:0;
padding:0;
display:flex;
min-height:100vh;
}
p{
color:white;
}
.main{
background-color:saddlebrown;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
width:18em;
height:18em;
}
</style>
</head>
<body>
<divclass="main">
<p>Centermeplease!</p>
</div>
</body>
[/code]
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航