首页 > 代码库 > 水平+垂直 居中
水平+垂直 居中
方案一
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>水平居中和垂直居中，并且父容器的宽度高度都是未知的，里面的子容器大小也是不一定的</title> <style type="text/css"> .parent{ background: #bebebe; height: 300px; width: 700px; /* 水平居中*/ text-align: center; /* 垂直居中*/ display: table-cell; vertical-align: middle; } .child{ background: #404040; height: 50px; width: 50px; color:white; /* 水平居中 */ display: inline-block; } </style></head><body><!--这个方案的优点：1。兼容性比较高。--><div class="parent"> <div class="child">DEMO</div></div></body></html>
方案二
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>水平居中和垂直居中 absolute_transform</title> <style type="text/css"> .parent{ background: #bebebe; height: 400px; width: 600px; position: relative; } .child{ background: #404040; height: 50px; color: white; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } </style></head><body><div class="parent"> <div class="child">DEMO</div></div></body></html>
方案三
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>水平居中和垂直居中flex_justify-content_align-items</title> <style type="text/css"> .parent{ background: #bebebe; height: 400px; width: 600px; display: flex; justify-content: center; align-items: center; } .child{ background: #404040; color: white; } </style></head><body><div class="parent"> <div class="child"><H1>DEMO</H1></div></div></body><!--缺点： 兼容性是个问题。--></html>
水平+垂直 居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。