DIV不确定高度内部元素水平垂直居中的方法归纳

总结当前知道的对div嵌套标签水平垂直居中方法,如果还有新的方法,请不吝赐教哦。好,下面开始列举代码咯。首先给需要实现水平垂直居中的两个div设置统一的样式:

  1. .styl {
  2.     width: 100%;
  3.     height: 300px;
  4.     background: #ccc;
  5.     margin: 30px auto;
  6.     position: relative;
  7.     border: 1px solid #000;
  8. }
  9. .box {
  10.     width: 200px;
  11.     height: 100px;
  12.     background: #333;
  13. }

方法一:父标签 table-cell 法

看题目就知道是利用父标签的 display: table-cell,该属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的。那么既然父标签已经是类似表格单元了,那么就可以利用表格单元的属性vertical-align: middle; 来使得内部元素垂直居中了,然后再给子标签 margin:0 auto; 即可,需要说明的是,这里的父标签需要设置宽度,不能自适应宽度:

  1. .styl1 {
  2.     width: 1000px;
  3.     display: table-cell;
  4.     vertical-align: middle;
  5. }
  6. .styl1 .box {
  7.     margin: 0 auto;
  8. }

html代码只要用我们上面的样式即可,之后的class名只要修改 styl1 为对应的样式名即可。

  1. <div class="styl styl1">
  2.     <div class="box"></div>
  3. </div>

方法二:常规 position 及子元素偏移方法

父标签设置 position:relative,子标签设置 position:absolute,同时设置 left:50%,top:50%,这个时候子标签的左上角已经垂直水平居中,再设置margin的负值为子元素宽高的50%即可将中心点对齐。
此方法缺点,需要动态调整 margin 偏移量为子标签宽高度的一半这个值,无法自动匹配。

  1. .styl2 .box {
  2.     position: absolute;
  3.     left: 50%;
  4.     top: 50%;
  5.     margin: -50px 0 0 -100px;
  6. }

方法三:CSS3新属性 transform 的 translate 方法

首先 transform 是css3的新属性,该属性是让我们对元素进行旋转、缩放、移动或倾斜。那么再看属性值 translate 是定义2D转换,就是平面的x,y喽。知道这些,那么我们在 方法二的基础上将偏移量通过 transform 来设置即可。
此属性支持IE9以上属性,而且需要兼容不同浏览器写法。

  1. .styl3 .box {
  2.     position: absolute;
  3.     left: 50%;
  4.     top: 50%;
  5.     transform: translate(-50%, -50%);
  6.     -webkit-transform: translate(-50%, -50%);
  7.     -moz-transform: translate(-50%, -50%);
  8.     -ms-transform: translate(-50%, -50%)
  9. }

方法四:margin:auto 方法

此方法依然是在方法二的基础上修改,将子元素的left、top、right、bottom都设置为0,然后再 margin:auto,即可实现子元素的水平垂直居中。此方法好处是自适应父标签的宽高,也就是说,无论父标签宽高怎么变都水平垂直居中哦。此方法支持IE8+以及其他浏览器。是不是很神奇,具体原因查看 margin:auto实现绝对定位元素的水平垂直居中:

  1. .styl4 .box {
  2.     position: absolute;
  3.     margin: auto;
  4.     left: 0;
  5.     top: 0;
  6.     bottom: 0;
  7.     right: 0;
  8. }

方法五:flex 布局方法

flex意为弹性布局,不同于盒模型布局,子元素实现垂直居中就比较容易了,具体教程可以参看 阮一峰的flex布局教程,这里只说怎么实现。在此我们只要将父标签设置为 display: flex,并进行相应的主轴 justify-content: center 和交叉轴上的 align-items: center 对齐方式就可以了。

  1. .styl5 {
  2.     justify-content: center;
  3.     align-items: center;
  4.     display: -webkit-flex;
  5.     display: flex;
  6. }

html结构同上:

  1. <div class="styl styl5">
  2.     <div class="box"></div>
  3. </div>

方法六:伪元素 inline-block/vertical-align 方法

这个方法主要利用父标签的 ::before 伪元素的 inline-block vertical-align来实现,比较巧妙,但这个方法要求子元素的属性必须是 display: inline-block, 好处依然是父子元素都可以自适应宽高并保持水平垂直居中。css如下:

  1. .styl6 {
  2.     text-align: center;
  3. }
  4. .styl6:before {
  5.     content: '';
  6.     display: inline-block;
  7.     height: 100%;
  8.     vertical-align: middle;
  9. }
  10. .styl6 .box {
  11.     display: inline-block;
  12.     vertical-align: middle;
  13. }

好,至此总结了div内部元素水平垂直居中的方法。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 DIV不确定高度内部元素水平垂直居中的方法归纳 https://zhutizhen.com/15033.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章