元素在父元素中水平垂直居中"/>
子元素在父元素中水平垂直居中
1.已知子元素的高度和宽度。通过定位的方式和子元素负边距实现。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>子元素在父元素中水平垂直居中</title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><style>*{margin:0;padding:0;}.parent{height:500px;background: #0f0;position: relative}.son{background: #f00;width:100px;height:100px;position: absolute;top:50%;left:50%;margin-left: -50px;margin-top:-50px;}</style></head><body><div class="parent"><div class="son"></div></div></body>
</html>2.未知子元素的高度和宽度的实现方式。
(1)、通过定位和css3中的translate属性实现；
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>子元素在父元素中水平垂直居中</title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><style>*{margin:0;padding:0;}.parent{height:500px;background: #0f0;position: relative}.son{background: #f00;position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);}</style></head><body><div class="parent"><div class="son">‘生活不止眼前的苟且，还有诗和远方’这句话看似文艺风爆棚，让人难以理解，实则却是一个很简单的道理。在无数人奋勇向前的时候，这一句话，更是成为了无数年轻人不怕苦不怕累的根本</div></div></body>
</html>(2)、通过flex定位实现。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>子元素在父元素中水平垂直居中</title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><style>*{margin:0;padding:0;}.parent{height:500px;background: #0f0;display: flex;flex-direction: column;justify-content: center;align-items: center;}.son{background: #f00;width: auto;}</style></head><body><div class="parent"><div class="son">‘生活不止眼前的苟且，还有诗和远方’这句话看似文艺风爆棚，让人难以理解，实则却是一个很简单的道理。</div></div></body>
</html>
更多推荐
子元素在父元素中水平垂直居中
发布评论