web前端开发个人技术博客
当前位置: HTML/CSS > 如何使块级元素垂直水平居中

如何使块级元素垂直水平居中

2018-11-26 分类:HTML/CSS 作者:码云 阅读(149)

对于div块级元素的垂直水平居中问题,可以说是老生常谈了,实现的方法也是琳琅满目,而我今天分享的内容就是经过自己的实践整理几个比较好的方法分享给大家,希望对大家有用,感兴趣的同学可以下去找找其他更好的方法我们一起交流学习,也给其他小伙伴一个实现的思路,当然这篇文章所讲的方法不是最终的,好的方法还会继续分享出来,后续我还会为大家分享一下关于网页布局的相关方法,敬请期待吧。

如何使div块级元素垂直水平居中

共有四种方法

已知宽和高,绝对定位+margin:auto;

已知块级元素的宽和高,设置其样式属性position:absolute;top:0;left:0;bottom:0;right:0;+margin:auto;

HTML代码:

1
2
3
4
5
<div class="box">    
    <div class="center-box4">
        <p>已知宽和高,绝对定位+margin:auto;</p>
    </div>
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box {
    background: #6c94be;
    width: 100%;
    height: 450px;
    position: relative;
}
.center-box4 {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: #5B83AD;
    margin: auto;
}

效果图展示:

已知宽和高,绝对定位+margin:auto;

依然使用绝对定位+css3样式属性transform

transform中translate偏移的百分比值是相对于自身大小的,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的,但问题是兼容性不好。IE9+以及其他现代浏览器才支持。IE9之前版本不支持,在IE8模式下,不居中。

HTML代码:

1
2
3
4
5
<div class="box">    
    <div class="center-box3">
        <p>使用css3样式属性transform,transform中translate偏移的百分比值是相对于自身大小的</p>
    </div>
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
    background: #6c94be;
    width: 100%;
    height: 450px;
    position: relative;  
}

.center-box3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #5B83AD;
    width: 200px;
}

效果图展示:

依然使用绝对定位+css3样式属性transform

使用css3样式属性display:flex设定水平垂直居中

使用css3样式属性display:flex设定水平垂直居中,父元素样式属性display:flex;子元素使用margin:auto;未知子元素高度的时候依然可以使用。

一般chrome和火狐都能很好地支持。ie不支持

HTML代码:

1
2
3
4
5
<div class="box">    
    <div class="center-box2">
        <p>使用css3样式属性display:flex设定水平垂直居中</p>
    </div>
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
.box {
    background: #6c94be;
    width: 100%;
    height: 450px;
    display: flex;
}
.center-box2 {
    margin: auto;
    width: 200px;
    background: #5B83AD;
}

效果图展示:

使用css3样式属性display:flex设定水平垂直居中

知道长和宽,使用绝对定位+外边距设定水平垂直居中

已知块级元素的宽和高,使用绝对定位+外边距设定水平垂直居中。

父元素position:relative,子元素position:absolute;top:50%;left:50%;margin-top:-height/2;margin-left:-width/2;

HTML代码:

1
2
3
4
5
<div class="box">
    <div class="center-box1">
        <p>知道长和宽,使用绝对定位+外边距设定水平垂直居中</p>
    </div>
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box {
    background: #6c94be;
    width: 100%;
    height: 450px;
    position: relative;  
}
.center-box1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background: #5B83AD;
}

效果图展示:

知道长和宽,使用绝对定位+外边距设定水平垂直居中

结束语

以上就是今天全部关于块级元素的垂直水平居中实现的方法,希望对大家有帮助,更多实战方法尽在码云笔记前端博客,感谢阅读。

「如果觉得我的文章对您有用,请帮助本站成长」

赞(7) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
7

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 3 条评论 - 如何使块级元素垂直水平居中

  1. cinarsky Windows NT Chrome 74.0.3729.131

    css水平垂直居中虽然不难,但是有的小伙伴还是有时候弄不清,可以收藏一下

    1. 码云 Windows 7 Chrome 69.0.3497.100

      @cinarsky可以收藏一下,以后直接拿去用

  2. 杠铃不重 Linux Chrome 62.0.3202.84

    学习了

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流