css垂直置中：5種方法

標籤：案例   tom   lin   例題   middle   ott   垂直置中   支援   寫法   

<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="utf-8" />
　　　　<title></title>
　　</head>

　　<style>
　　　　/*方法四*/

　　　　/* This parent can be any width and height */
　　　　.block {
　　　　　　height: 300px;
　　　　　　text-align: center;
　　　　　　background: #FFE1CC;
　　　　　　border: 2px solid #91C001;
　　　　}

　　　　/* The ghost, nudged to maintain perfect centering */
　　　　.block:before {
　　　　　　height: 100%;
　　　　　　content: ‘‘;
　　　　　　display: inline-block;
　　　　　　vertical-align: middle;
　　　　　　margin-right: -0.25em; /* Adjusts for spacing */
　　　　}

　　　　/* The element to be centered, can also be of any width and height */
　　　　.centered {
　　　　　　width: 50%;
　　　　　　display: inline-block;
　　　　　　vertical-align: middle;
　　　　　　background: #A3E6F1;
　　　　}

　　</style>

　　<body>

　　　　<!--
　　　　　　垂直置中：方法一
　　　　　　使用：display：table；vertical-align：middle；
　　　　-->
　　　　<div style="width: 100%; height: 50px; display: table;border: 1px solid #333; background: #E0EAF4;">
　　　　　　<div style="text-align: left; line-height: 50px;">項目質監機構</div>
　　　　　　<div style="display: table-cell; vertical-align: middle;">
　　　　　　　　<a style="border: 1px solid #333; height:2px; width:10px;"></a>
　　　　　　</div>
　　　　</div>

　　　　<!--
　　　　　　垂直置中：方法二
　　　　　　使用：position：absolute；寫法一
　　　　-->
　　　　<div style="position: relative; height: 150px; background-color: #C5C5FD;">
　　　　　　<div style="position:absolute; background:#6F66FB; width: 100px; height: 100px; margin: auto; top: 0; bottom: 0; left: 0; right: 0;"></div>
　　　　</div>

　　　　<!--
　　　　　　垂直置中：方法二
　　　　　　使用：position：absolute；寫法二
　　　　-->
　　　　<div style="position: relative; height:140px; background: #333; border: 5px dashed #658945;">
　　　　　　<div style="position: absolute; height: 50px; width: 50px; top: 50%; margin-top: -25px; background: #84F754; left: 50%; margin-left: -25px;"></div>
　　　　</div>

　　　　<!--
　　　　　　垂直置中：方法三
　　　　　　使用：display：flex；
　　　　　　　　   justify-content: center;水平置中
　　　　　　　　　align-items: center; 垂直置中

　　　　　　IE9，IE8下不支援；
　　　　-->
　　　　<div style="display: flex; display: -webkit-flex; height: 200px; background: #FFFFCC; border: 3px solid #C0014E; align-items: center; justify-content: center;">
　　　　　　<div style="height:70px; width:70px; background: #29F9F9;"></div>
　　　　</div>

　　　　<!--
　　　　　　垂直置中：方法四
　　　　　　使用：display：inline-block；
　　　　-->
　　　　<div class="block">
　　　　　　<div class="centered">
　　　　　　　　<h1>haorooms案例題目</h1>
　　　　　　　　<p>haorooms案例內容，haorooms案例內容haorooms案例內容haorooms案例內容haorooms案例內容haorooms案例內容haorooms案例內容haorooms案例內容haorooms案例內容</p>
　　　　　　</div>
　　　　</div>

　　</body>
</html>

css垂直置中：5種方法