CSS代码实现绝对居中方法_世敏网络科技有限公司

全国

语言

简体中文

繁體中文

English

我们承诺100%包做好，完善的售后服务
世敏网络是一家专注于企业建站系统开发，网站建设，网站设计，网站制作，小程序开发，功能定制开发等互联网领域设计的专业公司
多年企业网站建设系统的研发经验
世敏网络拥有多年的企业建站系统研发经验，在不断对方案优化的过程中搭建了"创意+技术+营销"一体化的服务模式

当前位置：首页 / 建站百科 / 网站建设

CSS代码实现绝对居中方法

时间：2022-11-17浏览量：收藏

css代码居中的方法：

1、定位法【position:absolute】；

如果子级div有定义宽和高的话就可以用这个方法。注意：margin-top,和margin-left的值均为高和宽值的一半。

<style>
   	div{
   		position: absolute;/* 或者使用fixed */
   		top: 50%;
   		left: 50%;
   		margin-top: -100px;
   		margin-left: -150px; 
   		width: 300px;
   		height: 200px;
   		background-color: #f00;
   	}
   </style> 
<body>
   <div> </div>
</body>

2、使用【margin:auto】法；

这个也可以是定位法。用这个方法要求子级div必须设置宽的值，不然没有效果哦~margin:auto是水平垂直都居中，如果仅仅设置水平居中，可设置为margin:auto 0;同理，如果仅仅设置垂直居中，可设置为margin:0 auto。

<style>
   	div{
   		position: absolute;/* 或者使用fixed */
   		top: 0;
   		left: 0;
   		bottom: 0;
   		right: 0;
   		margin: auto; 
   		width: 300px;
   		height: 200px;
   		background-color: #f00;
   	}
   </style> 
<body>
   <div> </div>
</body>

3、使用【display:table-cell】法；

这个方法主要针对多行文字内容的垂直居中对齐。注意：text-align:center设置了文字的水平居中对齐，vertical-align:middle设置的是垂直居中对齐。

<style>
div{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
height: 200px;
background-color: #f00;
margin: auto;
}
   
   	p{
   		display: inline-block;
   		vertical-align: middle;
   		width: 150px;
   		height: 100px;
   		border: 1px solid #ccc;
   		color: #fff;
   	}
   </style> 
<body>
   <div>
<p>多行文字内容，居中设置效果</p>
   </div>
</body>

4、使用【transform:translate(x,y)】法。

这个是css3中的新属性，如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。

<style>
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
   </style> 
<body>
   <div>transform:translate(x,y)方法，绝对居中效果</div>
</body>

顶一下

(0)

0.00%

踩一下

0.00%