CSS居中问题

最新推荐文章于 2024-10-14 09:19:01 发布

原创最新推荐文章于 2024-10-14 09:19:01 发布 · 513 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了使用CSS实现不同场景下元素居中的多种方法，包括文本、图片和块级元素的水平及垂直居中技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>div标签</title>
<style type="text/css">
/* 浮动 */
.clearfix:before,.clearfix:after {content: ".";display: block;height: 0;line-height: 0;clear: both;visibility: hidden;}
.clearfix {zoom:1;clear: both;display: block; _height:1px;}

body{padding:0;margin:0;}
.relative{position: relative;}

.tk{
position: relative;width: 1024px;background: #aaa;
margin: 0 auto;
text-align: center;
}

.tk-s{
position: absolute;color: red;font-size: 20px;font-family: '微软雅黑';
border-radius: 10px;background: #F0F0F0;width: 100px;height: 50px;text-align: center;line-height: 50px;

left: 50%;margin-left:-50px;
top: 50%;margin-top: -25px;
}

.tk-m{
position:relative;width:100px;height:100px;
left: 50%;margin-left:-50px;
}

</style>
</style>
</head>
<body>
<div class="tk">
1、使用text-align: center使diplay:inline-block元素居中<br>
<img src="http://img3.jiemian.com/101/original/20160511/146293713997498200_a580x330.jpg"><br>

2、指定宽度的display:block元素使用margin:auto居中<br>
3、使用position: absolute;left：left: 50%;margin-left:-宽度居中<br>
<div class="relative clearfix">
<img src="http://img3.jiemian.com/101/original/20160511/146293713997498200_a580x330.jpg" style="display:block;margin:0 auto;"><br>
<div class="tk-s">彩云之南</div>
</div><br>

4、文字环绕居中<br>
<img src="http://img3.jiemian.com/101/original/20160511/146293713997498200_a580x330.jpg" style="vertical-align: middle;" width="50" height="50">
<span class="nh">图片文字环绕</span><br><br><br>

5、非绝对定位使用left居中
<div class="relative">
<img class="tk-m" src="http://img3.jiemian.com/101/original/20160511/146293713997498200_a580x330.jpg" style="display:block"><br>
</div>
</div>
</body>

</html>

--div高度不固定,img高度固定时垂直居中

.div{vertical-align:middle;}

.div-img{display:inline-block;vertical-align: middle;position: relative;top:50%;height:20px;margin-top:-10px;}

.div-text{display:inline-block;vertical-align: middle;position: relative;top:50%;height:20px;margin-top:-10px;}