史上最全概括，十种方法实现水平垂直居中~来自万物之恋
十种实现水平垂直居中的方法，有用的话就点赞收藏吧！
十种方法实现水平垂直居中
- 1. 绝对定位配合外边距
- 2. 绝对定位配合外边距二
- 3. 绝对定位配合偏移
- 4. 弹性布局
- 5. 网格布局
- 6. 使用类似表格的布局特性
- 7. 外边距左右自适应配合弹性盒子
- 8. 使用display：box 并设置相应属性
- 9. 使用内边距撑开容器
- 10. 文字居中与同等行高
首先设置好需要用到的标签：
<style>*{margin: 0;padding: 0;}body{width: 100vw;height: 100vh;background: lightgray;}.container{width: 300px;height: 300px;background: rgb(1, 221, 210);}
style><body><div class="container"><p>这里有一段演示文字p>div>
body>
1. 绝对定位配合外边距
相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。有着所有放法中最好的兼容性，但是必须知晓盒子的具体大小。
.container{position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -150px;}
2. 绝对定位配合外边距二
将盒子的上下左右定位全部设置为0，同时设置外边距自适应
.container{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
3. 绝对定位配合偏移
第一种方法的升级版，放弃外边距的写法，使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小，不需要知道盒子的具体大小。
.container{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
4. 弹性布局
css3引入的新布局模式，可以设置各种属性来有效排列容器内的元素。需要设置在父级上，但是父级必须设置固定有效的高度，不然无法垂直居中无法实现。
body{display: flex;justify-content: center;align-items: center;}
5. 网格布局
与弹性布局相似，但是网格布局的优势在于网格布局分布元素是逐行分布，保留块元素特性；而弹性布局设置居中后，所有块级子元素会获得行内元素的特性。
body{display: grid;align-items: center;justify-content: center;}
6. 使用类似表格的布局特性
给容器赋予类似
标签的布局特性，，同时配合文字居中属性。前提是容器父级拥有确定有效的宽高，即不能设置为百分比，使用vw，vh等单位也同样不行。
.container{display: table-cell;vertical-align: middle;text-align: center;
}
7. 外边距左右自适应配合弹性盒子
父级使用弹性布局，使元素垂直居中，同时子元素设置外边距自适应来达到水平居中的效果。
body{display: flex;align-items: center;
}.container{margin: 0 auto;}
8. 使用display：box 并设置相应属性
使用display的属性之一，写法上和第三种方法相似，但是目前主流浏览器都不支持，虽然可以通过兼容性写法来使用，但是不推荐（作者在使用时仅成功实现了垂直居中，慎用！）
body{display: box;box-pack: center;box-orient: vertical;display: -webkit-box;-webkit-box-pack: center;-webkit-box-orient: vertical;}
9. 使用内边距撑开容器
在不对容器设置宽高，但是里面存在内容的情况下，设置上下左右相等的内边距，可以将容器撑开，并且内容会水平垂直居中。但由于块级标签的特性，水平方向上会受到父级容器宽度的影响。
.container{padding: 50px;}
10. 文字居中与同等行高
在知晓父级容器高度的情况下，给块级子元素设置文字居中属性，以及和父级高度相等的行高，可以使内容水平垂直居中，使用在单行文本内容的情况下效果最佳。
p{text-align: center;line-height: 300px;
}
这里是万物之恋，我们下次再见吧！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！