1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"/> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> 7 <!-- 自定义网页信息 --> 8 <title>CSS居中demo</title> 9 <link rel="shortcut icon" href=" " /> 10 <base target="_blank" href=" " /> 11 <meta name="description" content=" " /> 12 <meta name="keywords" content=" " /> 13 <meta name="Copyright" content=" " /> 14 <meta name="author" content="Pich" /> 15 <!-- 外链样式表和脚本 --> 16 <link rel="stylesheet" type="text/css" href = " "> 17 <script type="text/javascript" src = " "></script> 18 <style> 19 * { margin: 0; padding: 0; } 20 /*公共样式*/ 21 blockquote { text-align: center;background-color: #aaa; width: 50%;margin: 0 auto} 22 div { width: 70%; height: 100px; margin: 2% auto; background-color: #ccc; } 23 p { color: #c00; } 24 /*第1种垂直居中样式*/ 25 .vertical-1 { line-height: 100px; text-align: center; vertical-align: middle; } 26 /*第2种垂直居中样式*/ 27 .vertical-2 p { line-height: 100px; text-align: center; } 28 /*第3种垂直居中样式*/ 29 .vertical-3 { display: table; } 30 .vertical-3 p { vertical-align: middle; display: table-cell; text-align: center; } 31 /*第4种垂直居中样式*/ 32 .vertical-4 { position: relative; } 33 .vertical-4 p { position: absolute; top: 40%; left: 25%; height: 20%; width: 50%; } 34 /*第5种垂直居中样式*/ 35 .vertical-5 { position: relative; } 36 .vertical-5 p { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 20%; margin: auto; } 37 /*第6种垂直居中样式*/ 38 .vertical-6 { padding: 2% 0; height: auto;} 39 .vertical-6 p { display: block; padding: 4% 0; text-align: center; } 40 /*****************************************************************************************************/ 41 /*第1种水平居中样式*/ 42 .level-1{} 43 .level-1 p{margin-right: auto;margin-left: auto; width: 150px;text-align: center;line-height: 100px} 44 /*第2种水平居中样式*/ 45 .level-2{text-align: center;} 46 .level-2 p{display: inline-block;width: 80%; } 47 /*第3种水平居中样式*/ 48 .level-3{ } 49 .level-3 p{ position:absolute; left:50%; width:700px; margin-left:-350px} 50 51 </style> 52 </head> 53 <body> 54 <!-- 页面主体 --> 55 <h1 style="text-align: center;color: #c00;">凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。</h1> 56 <br><br><br><br> 57 <blockquote> 58 /*第1种垂直居中样式*/<br>.vertical-1 { line-height: 100px; text-align: center; vertical-align: middle; } 59 </blockquote> 60 <div class="vertical-1"> 61 <img src="1.png" alt=""> 62 </div> 63 <blockquote> 64 /*第2种垂直居中样式*/<br>.vertical-1 p { line-height: 100px; } 65 </blockquote> 66 <div class="vertical-2"> 67 <p>垂直居中实例2垂直居中实例2垂直居中实例2垂直居中实例2垂直居中实例2垂直居中实例2</p> 68 </div> 69 <blockquote> 70 /*第2种垂直居中样式*/<br>.vertical-1 p{line-height: 100px;} 71 </blockquote> 72 <div class="vertical-3"> 73 <p>垂直居中实例3垂直居中实例3垂直居中实例3垂直居中实例3垂直居中实例3垂直居中实例3</p> 74 </div> 75 <blockquote> 76 /*第3种垂直居中样式*/<br>.vertical-3 { display: table; }<br>.vertical-3 p { vertical-align: middle; display: table-cell; } 77 </blockquote> 78 <div class="vertical-4"> 79 <p>垂直居中实例4,注：vertical-align:middle这个属性一般情况下只对行内元素生效，对块级元素只有table-cell生效。</p> 80 </div> 81 <blockquote> 82 /*第5种垂直居中样式*/<br>.vertical-5 { position: relative; }<br>.vertical-5 p { position: absolute; top: 0; bottom: 0; left: 0; right: 0; 50%; height: 20%; margin: auto; } 83 </blockquote> 84 <div class="vertical-5"> 85 <p>垂直居中实例5适用：块级元素 但在IE版本低于7时不能正常工作</p> 86 </div> 87 <blockquote> 88 /*第6种垂直居中样式*/<br>.vertical-6 { padding: 2% 0; height: auto;}<br>.vertical-6 p { display: block; padding: 4% 0; } 89 </blockquote> 90 <div class="vertical-6"> 91 <p>垂直居中实例6垂直居中实例6垂直居中实例6垂直居中实例6垂直居中实例6垂直居中实例6</p> 92 </div> 93 <!-- ***************************************************************************************************** --> 94 <blockquote> 95 /*第1种水平居中样式:自动外边距实现居中*/<br>.level-1{}<br>.level-1 p{margin-right: auto;margin-left: auto; 150px;text-align: center;line-height: 100px} 96 </blockquote> 97 <div class="level-1"> 98 <p>水平居中参考实例1</p> 99 </div> 100 <blockquote> 101 /*第2种水平居中样式*/<br>.level-1{text-align:center;}<br>.level-2 p{display: inline-block;background: #c00; 80%; } 102 </blockquote> 103 <div class="level-2"> 104 <p>使用text-align属性，应用到body元素上即可。它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。在创建好布局必须的div之后，为body应用text-align属性：body的所有子孙元素都会被居中显示。我们就需要用再写一条规则，让其中的文本回到默认的居左对齐.另外，真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。</p> 105 </div> 106 <blockquote> 107 /*第3种水平居中样式*/<br>.level-3{ }<br>.level-3 p{ position:absolute; left:50%; 700px; margin-left:-350px} 108 </blockquote> 109 <div class="level-3"> 110 <p>创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点</p> 111 </div> 112 </body> 113 </html> 114 <!-- 115 made with ♥ by: 116 _ 117 _ |_| _ 118 |_| _____ |_| 119 _ / _ 120 |_| / ____ |_| 121 / / 122 / / 123 |\___/ / 124 125 / 126 / 127 | | 128 | | 129 \_____/ 130 -->