CSS实现垂直居中

最新推荐文章于 2025-04-18 20:43:03 发布

kongjunchao159

最新推荐文章于 2025-04-18 20:43:03 发布

阅读量363

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/kongjunchao159/article/details/50825714

CSS 专栏收录该内容

19 篇文章

订阅专栏

1、最简单的单行文本line-height垂直居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; text-align:center;}
p{line-height:300px;}
</style>
</head>
<body>
<div class="box">
	<p>XXXXXXXXXXXX</p>
</div>
</body>
</html>

2、图片垂直居中，使用line-height和vertical-align:middle

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; text-align:center; line-height:300px;}
img{vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
	<img src="images/img_27.gif" />
</div>
</body>
</html>

3、使用table布局，display:table和display:table-cell

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; text-align:center; display:table;}
p{display:table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
	<p>XXXXXXXXXXXXXXXXXXXX</p>
</div>
</body>
</html>

4、绝对居中，使用margin:auto和top、bottom、left、right同设为0

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; position:relative;}
.box-1{width:50%; height:50%; border:1px solid blue; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto;}
</style>
</head>
<body>
<div class="box">
	<div class="box-1"></div>
</div>
</body>
</html>

5、使用flex布局，display:flex和justify-content:center水平居中，align-items:center垂直居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; display:flex; justify-content:center; align-items:center;}
.box-1{width:200px; height:100px; border:1px solid blue;}
</style>
</head>
<body>
<div class="box">
	<div class="box-1"></div>
</div>
</body>
</html>

关于flex弹性布局参考链接：

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

6、使用margin负值（缺点是必须知道宽高）

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title></title>  
<style>  
*{margin:0; padding:0;}  
.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; position:relative;}  
.box-1{width:200px; height:100px; border:1px solid blue; position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-50px;}  
</style>  
</head>  
<body>  
<div class="box">  
    <div class="box-1"></div>  
</div>  
</body>  
</html>

7、使用transform:translate(-50%,-50%)，移动端用的较多，可以不用知道宽高

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title></title>  
<style>  
*{margin:0; padding:0;}  
.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; position:relative;}  
.box-1{width:200px; height:100px; border:1px solid blue; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}  
</style>  
</head>  
<body>  
<div class="box">  
    <div class="box-1"></div>  
</div>  
</body>  
</html>

8、使用display:-webkit-box，设置-webkit-box-pack:center和-webit-box-align:center;

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title></title>  
<style>  
*{margin:0; padding:0;}  
.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center;}  
.box-1{width:200px; height:100px; border:1px solid blue;}
</style>  
</head>  
<body>  
<div class="box">  
    <div class="box-1"></div>  
</div>  
</body>  
</html>

关于CSS垂直居中参考链接：

https://www.zhihu.com/question/20543196

http://blog.youkuaiyun.com/freshlover/article/details/11579669