思路：子項目絕對位置，距離頂部 50%，左邊50%，然後使用css3 transform:translate(-50%; -50%)
優點：高大上,可以在webkit核心的瀏覽器中使用
缺點：不支援IE9以下不支援transform屬性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>未知寬高元素水平垂直置中</title></head><style>.parent3{ position: relative; height:300px; width: 300px; background: #FD0C70;}.parent3 .child{ position: absolute; top: 50%; left: 50%; color: #fff; transform: translate(-50%, -50%);}</style><body><p class="parent3"> <p class="child">hello world-3</p> </p></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
