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

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

共有四种方法

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

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

HTML 代码：

<div class="box">    
    <div class="center-box4">
        <p>已知宽和高，绝对定位+margin:auto;</p>
    </div>
</div>

CSS 代码：

.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;
}

效果图展示：

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

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

HTML 代码：

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

CSS 代码：

.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 样式属性 display:flex 设定水平垂直居中

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

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

HTML 代码：

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

CSS 代码：

.box {
    background: #6c94be;
    width: 100%;
    height: 450px;
    display: flex;
}
.center-box2 {
    margin: auto;
    width: 200px;
    background: #5B83AD;
}

效果图展示：

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

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

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

HTML 代码：

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

CSS 代码：

.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;
}

效果图展示：

结束语

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

以上关于如何使块级元素垂直水平居中的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。