0514-86177077
9:00-17:00(工作日)
margin
left/top
translate
height: 50%;
padding
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body{ padding: 0; margin: 0; } #box{ width: 50%; /* div处置居中 */ position: relative; transform: translate(50%, 25%); /* */ /* 此处解决div高度为body宽度的一半,并且文字垂直居中 */ padding-top: 25%; padding-bottom: 25%; line-height: 0; text-align: center; /* */ background-color: #111; color: #fff; } </style> </head> <body> <div id="box"> box123 </div> </body> </html>
效果
到此这篇关于CSS实现div不设高度完全居中的文章就介绍到这了,更多相关CSS div不设高度完全居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
标签:无锡 焦作 钦州 绥化 湘西 湖北 试驾邀约 铜陵
上一篇:有趣的css实现隐藏元素的7种思路
下一篇:css之粘性sticky布局实现题头定位在顶部的方法