css垂直水平居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <title>垂直水平居中</title> <style type="text/css"> .container { position: relative; height: 200px; border: 2px solid #e4e4e4; } .centerCon { width: 200px; border: 1px solid #e4e4e4; text-align: center; } .center1 { position: relative; top: 50%; margin: auto; height: 100px; margin-top: -50px; } .center2 { position: relative; top: 50%; left: 50%; height: 100px; margin-top: -50px; margin-left: -100px; } .center3 { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .center4 { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 100px; margin: auto; } .Center-Container.is-Table { display: table; width: 100%; height: 200px; border: 1px solid #ccc; } .is-Table .Table-Cell { display: table-cell; vertical-align: middle; } .is-Table .Center-Block { width: 50%; margin: 0 auto; border: 1px solid #ccc; } .container6 { display: flex; justify-content: center; align-items: center; } .center6 { border: 1px solid #ccc; } </style> </head> <body> <h3>第一种:</h3> <div class="container"> <div class="centerCon center1">垂直水平居中1</div> </div> <h3>第二种:</h3> <div class="container"> <div class="centerCon center2">垂直水平居中2</div> </div> <h3>第三种 变形(Transforms):</h3> <div>优点:1. 内容可变高度 2.代码量少<br/> 缺点:1.IE8不支持<br/> 2.属性需要写浏览器厂商前缀<br/> 3.可能干扰其他transform效果<br/> 4.某些情形下会出现文本或元素边界渲染模糊的现象 </div> <div class="container"> <div class="centerCon center3">垂直水平居中3</div> </div> <h3>第四种:</h3> <div> 优点: 1.支持跨浏览器,包括IE8-IE10.<br/> 2.无需其他特殊标记,CSS代码量少 <br/>3.支持百分比%属性值和min-/max-属性 <br/>4.只用这一个类可实现任何内容块居中 <br/>5.不论是否设置padding都可居中(在不使用box-sizing属性的前提下)<br/> 6.内容块可以被重绘。<br/> 7.完美支持图片居中。 <br/>缺点: 1.必须声明高度(查看可变高度Variable Height)。<br/> 2.建议设置overflow:auto来防止内容越界溢出。(查看溢出Overflow)。<br/> 3.在Windows Phone设备上不起作用。 </div> <div class="container"> <div class="centerCon center4">垂直水平居中4</div> </div> <h3>第五种:</h3> <div class="Center-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> 垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5垂直水平居中5 </div> </div> </div> <h3>第六种:</h3> <div class="container container6"> <div class="center6"> 垂直水平居中6 </div> </div> </body> </html>
css水平垂直居中的六种方式,看你选择哪种,不同兼容性.
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/587
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!