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上边界距离窗口上边的距离为窗口高度的50%,并针对不同浏览器进行兼容。-- 在外层添加一个div,把行内容居中,添加.row .justify-content-center -->
Phoebe的学习天地 2020-04-14
Simagle 2015-05-27
Dorissun 2016-09-22
ThikHome 2015-05-27
gufudhn 2020-06-12
沈宫新 2020-05-04
libowen0 2014-05-30
Phoebe的学习天地 2019-07-01
Phoebe的学习天地 2019-07-01
王为仁 2019-07-01
WebVincent 2019-07-01
王景迁 2019-07-01
libowen0 2019-06-30
淡风wisdon大大 2019-06-28
冰蝶 2018-08-17
qiupu 2019-06-28
hellowzm 2020-10-12