Middle-help 終極實現元素水平垂直居中

時間 2019-12-08

標籤 middle help 終極實現元素水平垂直居中简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>inline-block實現未知尺寸元素水平垂直居中終極方案</title>
<style>
#demo{
    overflow:hidden;
    resize:both;
    width:180px;
    height:100px;
    margin:10px auto;
    text-align:center;
    background:#eee;
    font-size:0;
}
#demo:after,#demo span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle;
}
#demo:after{
    content:'';
}
#demo p{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:middle;
    font-size:16px;
}
</style>
</head>
<body>


<div id="demo">
    <p>這是一個終極實現的水平垂直居中實例</p>
    <!--[if lt IE 8]><span></span><![endif]-->
</div>


</body>
</html>

相關標籤/搜索