css样式——完美解决div水平居中及div水平垂直居中的方法总结

时间: 2019-07-21阅读: 2732标签: 居中

在我们网页开布局中,经常遇到div元素的垂直居中或者水平居中。这篇文章总结一下使用的方法。  

div水平居中

1.通过margin:auto的方式

.div{
  margin:auto;   
  width:60%;    
}

2.通过text-align的方式

.boxdiv{
     text-align:center;
}
.boxdiv  .div{
     display:inline-block;
}

3.通过定位的方式

.div{
	position: absolute;
	width: 100px;
	left: 50%;
	margin-left: -50px;/*宽度值/2*/
}


div垂直水平居中

1.通过table-cell(vertical-align的百分比值是相对于line-height计算的)

.boxdiv{
    width:400px;
    height:400px;
    display:table-cell;
    vertical-align:middle;
    text-align: center;
}
.boxdiv .div{
    width:200px;
    height:200px;
    display:inline-block;
}

2..绝对定位方式+四个方向置0(需设置子元素宽高,否则子元素将与父元素宽高一致)

.boxdiv{
          width:400px;
          height:400px;
          position:relative;
}
 .boxdiv .div{
            width:200px;
            height:200px;
            margin: auto;  
            position: absolute;  
            top: 0; left: 0; bottom: 0; right: 0; 
}

3.通过定位+maring偏移

.boxdiv{
            width:400px;
            height:400px;
            position:relative;
 }
 .boxdiv .div{
          width:300px;
           height:200px;
           margin:auto;
           position:absolute;
           left:50%;
           top:50%;
           margin-left: -150px;
           margin-top:-100px;
}

4.通过css3的flex(存在兼容性问题,适合移动端)

.divbox{
    width:400px;
    height:400px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
 .divbox .div{
    width:200px;
    height:200px;
    background-color: red;
}

5.absolute+transform

<div class="parent">
  <div class="child">Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

6.box-alignandbox-pack 属性(IE不支持)

.parent{
    position: relative;
    top: 0; left: 0; right: 0; bottom: 0;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;
}
.child{
    -webkit-box-flex: 0;
}


div的水平和垂直居中方法总结基本就这些了。如果你有更好的,或者更巧妙的解决方案,欢迎留言~~~~


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/23

CSS 不定宽高的垂直水平居中方式总汇

垂直居中,在 CSS 中是一个老生常谈的问题,面试的时候也会时常被提及。所以,今天我们就来聊聊 9 种不同的居中方法。有常见的 flex、transform、absolute 等等。也有 CSS3 的网格布局。还有伪元素的方法,是的,你没有看错

CSS中实现图片垂直居中

在曾经的 淘宝UED 招聘 中有这样一道题目:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。当然出题并不是随意,而是有其现实的原因

css垂直居中的几种实现方式

相比较水平居中,垂直居中比较复杂点。尤其是在实际页面中,有很多特殊的场景,导致水平居中实现起来比较麻烦。这篇文章旨在纪录一些我知道的居中方式

div元素宽度不定的情况下如何居中显示

方法一:兼容IE67,但是当元素宽度大于50%时,会出现滚动条。外层使用text-align为center是为了让里面的内联元素居中,很显然在外层设置text-align:center后

如何让子元素在父元素中水平垂直居中七种方法?

第一种:定位+margin:auto,注意:兼容性较好,缺点:不支持IE7以下的浏览器.第二种:定位+margin-left+margin-top注意:兼容性好;缺点:必须知道元素的宽高,第三种:定位+transfrom

css中line-height的理解_介绍line-height实际应用

css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同。line-height只影响行内元素和其他行内内容,而不会直接影响块级元素。line-height实际应用:图片水平垂直居中、多行文本水平垂直居中、用line-height代替height

安卓移动端line-height垂直居中出现偏移的原因,及解决方法

目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的。出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的。

css图片居中,通过纯css实现图片居中的多种实现方法

在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全