首页
产品
快图
小程序
微商城
网站建设
新闻
公司动态
行业资讯
关于
案例
联系
css 完成文本竖直垂直居中
2021-03-13 08:20
jianzhan
分两种状况:
fix height:
即竖直垂直居中的元素高宽比已知,这个较为简易,也不必须附加的輔助元素。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf⑻" /> <meta http-equiv="cache-control" content="no-cache" /> <style> <!-- html, body { height: 100%; margin: 0; padding: 0; } body { position: relative; } #div { background: blue; color: #fff; position: absolute; top: 50%; left: 50%; height: 240px; width: 240px; margin: ⑴20px 0 0 ⑴20px; } --></style> </head> <body> <div id="div"> i'm Mr. Middle. </div> </body> </html>
提醒:您能够先改动一部分编码再运作
variable height:
垂直居中元素高宽比可变,这个必须附加的1个wrapper元素,用table-cell的方法来仿真模拟报表的垂直居中完成,自然,初期的ie又是另外一招,实际可见编码。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf⑻" /> <meta http-equiv="cache-control" content="no-cache" /> <style> <!-- html, body { height: 100%; margin: 0 auto; padding: 0; } body { position: relative; display: table; } #wrapper { display: table-cell; vertical-align: middle; text-align: middle; } #div { background: blue; color: #fff; } * html #wrapper, *+html #wrapper { position: absolute; top: 50%; } * html #div, *+html #div { position: relative; top: ⑸0%; } --></style> </head> <body> <div id="wrapper"> <div id="div"> i'm Mr. Middle. i'm Mr. Middle. i'm Mr. Middle. </div> </div> </body> </html>
提醒:您能够先改动一部分编码再运作
为您推荐
css 完成文本竖直垂直居中
警事丨射阳公安局聚齐微友的能量,仅用
竹妃卫生纸三级分销商系统软件方式是啥
百度收录不平稳的缘故
宜宾市古廖国签订北斗定位系统宜宾市企
所有文章
公司动态
行业资讯