时间：2022-11-17 浏览量： 收藏
css代码居中的方法：
1、定位法【position:absolute】；
如果子级div有定义宽和高的话就可以用这个方法。注意：margin-top,和margin-left的值均为高和宽值的一半。
简体中文
繁體中文
English
<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>
RELATED RECOMMEND
2022-11-17
企业网站导航设计是网站中一个很重要的因素，一个合理的导航设计不但利于搜索引擎优化，还对提升用户体验至关重要，迅速了解自己所处的位置，这对提高用户的转化率十分有用。在网站建设中做好各类导航设计对网站后期的优化推广十分有利。 下面我们就来看看在网站设计制作中，做好导航设计的相关几点。 1、辅助导航。 为用户提供一个直观的展示，让用户知道自己所在的网站位置，这样可以让每一级的位置名称的有链接可会，每一个网页都必须包含辅助导航以及左上角的网站的logo标识。 2、网站logo链接。 在网站设置中，在每一个出现网...
2022-11-17
企业如何选择网络公司建站的常见问题，世敏网络总结以下几点：1、企业会以自己建站的要求，比如需要哪些功能板块，界面的风格等直接来衡量各网络公司报的费用，很多具体细节的东西企业并不知道，这样一些网络公司可能就会以最简单的方式来做，这样省时、省力，因为很多
2022-11-17
厦门网站建设包括网站策划、网页设计、网站功能、网站优化技术、网站内容整理、网站推广、网站评估、网站运营、网站整体优化、网站改版等。网站建设的前期准备包括了前期网站定位、内容差异化、页面沟通等战略性调研，这个过程需要网站策划人员、美工设计人员、PHP程
Copyright © 2012-2024 世敏网络 版权所有 闽ICP备18026760号-1 
闽公网安备 35020502000640号 网站地图 Sitemap
关键词聚合
