>> 知识广场

transform:translate(-50%,-50%)实现水平或垂直居中效果

分类：HTML,CSS 作者：myerob 标签：transform translate -50% -50% 实现 水平 垂直 居中 阅读：135 收藏
导读：
<style> * { margin: 0; padding: 0; } .center { width: 960px; height: 50… 
<style>
  * {
    margin: 0;
    padding: 0;
  }

  .center {
    width: 960px;
    height: 500px;
    margin: 0 auto;
    background: #1879d9;
  }

  .center p {
    background: #fff;
    position: relative;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100px;
    /* 让div 沿Y轴平移自身高度的一半 */
    transform: translateY(-50%);
  }
</style>

<div class="center">
  <p>居中处理的文字</p>
</div>

代码效果：

 

 

 

 

 

 

 

相关推荐