时间：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中的新属性，如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在QY千亿国际做自适应页面的时候可以用到。
<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>RELATED RECOMMEND
2022-11-17
外贸电商领域 Twitter 已成为一种极具潜力的推广工具，能够为外贸网站快速导入大量流量，是外贸电商发展的时代趋势。一、将 Twitter 和外贸网站关联起来（一）添加 Twitter 分享按钮在网站添加 Twitter 分享按钮意义重大。这不仅方便客户将网站产品、内容分享到他们自己的 Twitter，更关键的是，每当网站更新产品或文章时，QY千亿国际自己要把更新内容分享到自己的 Twitter 上。如
2022-11-17
在当今的网络世界中，富媒体对于大家来说早已不是什么新鲜事物，特别是谷歌广告中频繁出现的富媒体展示形式，那真是令人眼花缭乱。然而，你可能不知道的是，在自然排名结果里同样蕴含着丰富多样的富媒体内容。这些富媒体元素就像是一把神奇的钥匙，即使QY千亿国际的网站在搜索结果中处于较低排名（比如首页非前三的位置），也能凭借它们开启获取更多用户互动的大门，让原本激烈的关键词排名竞争变得不再那么残酷。那么，作为 SEO 从
2022-11-17
外贸网站提示用户是否接受cookie是因为cookie对网站及用户都有好处，但同时也可能对用户的隐私造成影响。Cookie是一种小型文档，由网站发送到用户的设备上，用于记录用户的行为和偏好，从而提供个性化的浏览体验。它们可以记录用户的登录状态、购物车信息等，以便用户下次访问时无需重新输入。同时，cookie还帮助网站分析用户行为，如页面浏览量、停留时间和点击次数等，为网站
