div中的div如何居中
Posted 1012hq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div中的div如何居中相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> </style> </head> <body> <div class="father"> <div class="son">son</div> </div> </body> </html>
方法一（使用绝对布局）： 这种方式的弊端是：必须要知道这个容器的长宽，因为在子元素中的 margin-top:-100px; margin-left:-100px; 这两个样式分别是子元素长、宽的一半。
.father { width: 500px; height: 500px; position: relative; background-color: red; } .son { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; background-color: black; }
方法二：仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。//这种方式很好的避免了方式一的弊端，不需要知道自己的长宽，一样可以定位到中间。
.father{ width: 1000px; height: 600px; position: relative; background-color: red; } .son { background-color: #fff; width: 300px; height: 300px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
方法三（使用弹性布局flex）：//这种方式比较通用：这样给父元素设置了三个样式display:flex;(弹性布局) justify-content:center;(内容水平居中) align-items:center; (内容垂直居中) 就可以达到水平、垂直居中的效果。
.father { width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; background-color: red; } .son { width: 200px; height: 200px; background-color: black; }
方法四（使用绝对布局）：//使用这种方式的要领是：子绝父相，且子元素要设置以下的样式position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; 就可以达到居中效果。
.father { width: 500px; height: 500px; position: relative; background-color: red; } .son { width: 200px; height: 200px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background-color: black; }
以上是关于div中的div如何居中的主要内容，如果未能解决你的问题，请参考以下文章