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

CSS垂直居中的6种方式，最快只用两行代码

2017-02-18 20:09 363 查看

本文给出了6种利用CSS使HTML元素垂直居中与父元素的方法，其中包括：

1、2 绝对定位的方式

3 基于属性计算的方式（只需要2行代码哦）

4 利用vertical-align属性

5 盒子模型方式

6 基于内联元素特性

需要说一下下面的代码的打开方式，当启用一种方法时，请打开一种方法的注释，然后把其它方法注释掉，比如我想使用第2中最简单的方式，最终结果为：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS垂直居中</title>
<style>
.wrapper{
width: 500px;
height: 500px;
background-color: #666;
/*方式三 基于属性计算*/
overflow: hidden;
}

.box{
width: 100px;
height: 100px;
background-color: red;
/*方式三*/
margin: calc(50% - 50px) auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>

好了，6种方法对应的总代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS垂直居中</title>
<style>
.wrapper{
width: 500px;
height: 500px;
background-color: #666;
/*方式一，方式二 绝对定位的方式*/
/*position: relative;*/
/*方式三 基于属性计算*/
/*overflow: hidden;*/
/*方式四: 基于vertical-align属性*/
/*text-align: center;*/
/*方式五: 使用弹性盒子*/
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/
/*方式六 基于块级内联元素的特性*/
/*line-height: 550px; !*.wrapper.height+1/2*box.height*!*/
/*text-align: center;*/
}

.box{
width: 100px;
height: 100px;
background-color: red;
/*方式一*/
/*position: absolute;*/
/*left:0;*/
/*right: 0;*/
/*top:0;*/
/*bottom:0;*/
/*margin: auto;*/
/*方式二*/
/*position: absolute;*/
/*left: 50%;*/
/*top: 50%;*/
/*margin-left: -50px; !*1/2的width*!*/
/*margin-top: -50px; !*1/2的height*!*/
/*方式三*/
/*margin: calc(50% - 50px) auto;*/
/*方式四*/
/*display: inline-block;*/
/*vertical-align: middle;*/
/*margin: 0 auto;*/
/*方式六*/
/*display: inline-block;*/
}

/*方式四的辅助元素*/
/*.help{*/
/*width: 0;*/
/*height: 100%;*/
/*display: inline-block;*/
/*vertical-align: middle;*/
/*}*/
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
<!--方式四-->
<!--<div class="help"></div>-->
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航