使用CSS3 Transforms實現垂直居中

垂直居中代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3實現垂直居中</title>
    <style>
    .parent {
    width: 100px;
    height: 100px;
    background-color: #999;
}
.child {
    position: relative;
    height: 50px;
    width: 50px;
    top: 50%;
    left: 50%;
    background-color:#333;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

垂直居中原理
top,left的50%是移動的是相對于.parent的50%寬度和高度，translateX,translateY移動的是.child的50%寬度和高度。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關注微信itclanCoder公眾號可收聽更多音頻 前言 關于網...
    itclanCoder閱讀 8,204評論 3贊 30
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1贊 92
  • 在CSS中如何居中這事兒是CSS為人所抱怨的典型代表之一。“為毛它這么難？%>_<%”，開發者們抱怨道。我認為這個...
    紅綠燈的黃閱讀 1,045評論 0贊 1
  • 水平居中布局 首先我們來看看水平居中 1.margin + 定寬 Demo.child{width:100px;m...
    xiaotao123閱讀 330評論 0贊 1
  • 很少再寫文章，可能不知從何下筆，更不知該寫什么。不為人知的心事，晦澀平常的生活，想寫，有時苦于沒有時間，有時想想，...
    我是你流浪過的地方閱讀 175評論 0贊 0