未知寬高元素水平垂直居中方法
阿新 • • 發佈：2018-11-26
CSS未知寬高元素水平垂直居中
方法一
思路：顯示設定父元素為：table，子元素為：cell-table，這樣就可以使用vertical-align: center，實現水平居中
優點：父元素（parent）可以動態的改變高度（table元素的特性）
缺點：IE8以下不支援
<style type="text/css"> .parent{ display: table; height: 300px; width: 300px; background-color: #f00; } .son{ display: table-cell; vertical-align: middle; text-align: center; color: #008000; font-size: 20px; } </style> <body> <div class="parent"> <div class="son"> good morning </div> </div> </body>
方法二
思路：使用一個空標籤span設定他的vertical-align基準線為中間，並且讓他為inline-block，寬度為0
缺點：多了一個沒用的空標籤，display:inline-blockIE 6 7是不支援的(新增上：_zoom1;*display:inline)。
當然也可以使用偽元素來代替span標籤，不過IE支援也不好，但這是後話了
<style> .parent{ height:300px; width: 300px; text-align: center; background: #FD0C70; } .parent span{ display: inline-block;; width: 0; height: 100%; vertical-align: middle; zoom: 1;/*BFC*/ *display: inline; } .parent .son{ display: inline-block; color: #fff; zoom: 1;/*BFC*/ *display: inline; } </style> <body> <div class="parent"> <span></span> <div class="son">hello world-2</div> </div> </body>
方法三
思路：子元素絕對定位，距離頂部 50%，左邊50%，然後使用css3 transform:translate(-50%; -50%)
優點：高大上,可以在webkit核心的瀏覽器中使用
缺點：不支援IE9以下不支援transform屬性
<style> .parent{ position: relative; height:300px; width: 300px; background: #FD0C70; } .parent .son{ position: absolute; top: 50%; left: 50%; color: #fff; transform: translate(-50%, -50%); } </style> <body> <div class="parent"> <div class="son">hello world-3</div> </div> </body>
方法四
思路：使用css3 flex佈局
優點：簡單 快捷
缺點：相容不好吧，詳情見：http://caniuse.com/#search=flex
<style type="text/css">
.parent{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background-color: lightblue;
}
.son{
color: green;
}
</style>
<body>
<div class="parent">
<div class="son">hello</div>
</div>
</body>