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

2018-11-26 分类：HTML/CSS 作者：码云阅读（495）

本文共计1836个字，预计阅读时长需要5分钟。

对于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) 打赏

标签：

display：flex；transform属性块级元素垂直水平居中方法相对定位绝对定位

上一篇：如何理解ES6模块

下一篇：Git入门与进阶教程之Git基础

你可能感兴趣

CSS Grid网格布局实例教程

你值得收藏的66个实用的css开发技巧之组件技巧

你值得收藏的66个实用的css开发技巧之图形技巧

你值得收藏的66个实用的css开发技巧之色彩技巧

你值得收藏的66个实用的css开发技巧之行为技巧

你值得收藏的66个实用的css开发技巧之布局技巧

仅使用CSS实现带有“显示更多”按钮的多行截断文本

用Sass创建一个可维护的图标系统

CSS3 SVG clip-path路径剪裁属性简介

深入理解css行高line-height及其应用

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

点击这里取消回复。

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

2019-06-16 22:05 回复
1. 码云 Windows 7 Chrome 69.0.3497.100
  @cinarsky可以收藏一下，以后直接拿去用
  
  2019-06-18 11:07 回复
杠铃不重 Linux Chrome 62.0.3202.84
学习了

2018-11-26 22:33 回复