关于div/块级元素水平垂直居中显示的解决办法

薇光网站建设

于 2020-09-20 13:44:58 发布

阅读量193

点赞数

分类专栏： CSS 问题集文章标签： css css3 html5 html jquery

本文链接：https://blog.youkuaiyun.com/qq_17475727/article/details/108692041

版权

CSS 问题集专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了使用CSS实现div元素水平和垂直居中的三种常见方法：1) 利用margin: 0 auto实现水平居中；2) 通过定位position并设置left/top属性来兼容IE6/7/8的水平居中；3) 结合position和transform实现水平垂直居中，适用于遮罩层。所有方法均经过实际测试，效果良好。

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

一、常用margin: 0 auto; 水平居中

.center-box{
	width: 1200px;
	height: 500px;
	background-color: green;
	margin: 0 auto;   
}

二、定位position（兼容ie6/7/8）、水平居中

<div class="father">
  <div class="center-box"></div>
</div>

.father{
	position: relative;
	z-index: 1;
}

.center-box{
	width: 1200px;
	height: 300px;
	z-index: 2;
	background: #f60;
	position: absolute;
    top:0;
    left: 50%;
    margin-left: -600px;
  /*transform: translate(-50%, 0);  */    支持css3浏览器
}

三、定位position+transform 、水平+垂直居中（遮罩层）

<div class="father">
  <div class="center-box"></div>
</div>

.father{
	position: fixed;
    _position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#B2000000',endColorstr='#B2000000');
}

.center-box{
    position: fixed;
    _position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 350px;
    margin: -175px 0 0 -250px;
    padding: 20px 0;
    color: #333;
    background: #fff;
}

@：亲测、三种方法都好用！