位置: IT常识 - 正文
CSS盒子居中的6种方法!(css盒子如何居中)
编辑：rootadmin推荐整理分享CSS盒子居中的6种方法!(css盒子如何居中)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css盒子怎么居中,css盒子居中代码,css盒子居中的几种方法,css把盒子放在中间,css把盒子放在中间,css 盒子居中,css把盒子放在中间,css盒子居中对齐怎么设置,内容如对您有帮助，希望把文章链接给更多的朋友！
常见的一种方式就是使用flex布局设置居中。
利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式
给容器设置：
display: flex;写在父元素上这就是定义了一个伸缩容器
justify-content 主轴对齐方式，默认是横轴
align-items 纵轴对齐方式，默认是纵轴
优点： 简单、方便、快速，三行代码搞定。
<style>.box { width: 200px; height: 200px; border: 1px solid; display: flex; align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中 justify-content: center; //纵轴对齐方式，默认是纵轴}.one { background: red;} </style><div class="box"> <div class="one">水平垂直居中</div></div>运行后:
2.flex-给子项设置<style>.box { width: 200px; height: 200px; border: 1px solid; display: flex;}.child { background: red; margin: auto; // 水平垂直居中} </style><div class="box"> <div class="child">水平垂直居中</div></div>运行后:
3.定位:子绝父相使用子绝父相的方式实现水平垂直居中。父元素设置position: relative。子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%);
<style>.box { width: 200px; height: 200px; border: 1px solid; position: relative;}.child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: red;} </style><div class="box"> <div class="child">水平垂直居中</div></div>运行后:
4.tabel-cell实现垂直居中css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中
而且tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了
使用tabel-cell实现垂直居中,容器设置 display: table-cell;;
vertical-align: middle属性设置元素的垂直对齐方式
子元素如果是块级元素，直接使用左右margin:auto实现水平居中。如果是行内元素，给容器设置text-align: center
利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素inline, 内联块inline-block, 内联表inline-table, inline-flex元素水平居中都有效
<style>.box { width: 200px; height: 200px; border: 1px solid; display: table-cell; vertical-align: middle; // 设置元素在垂直方向上的对齐方式 text-align: center;}.child { background: red; display: inline-block;} </style><div class="box"> <div class="child">水平垂直居中</div></div>运行后:
5.给容器加个伪元素这是一种不常用的方法实现垂直居中。
给容器加个伪元素，设置line-height等于容器的高度。给子元素设置display: inline-block;
此种方式适合给文本设置水平垂直居中
<style>.box { width: 200px; height: 200px; border: 1px solid; text-align: center;}.box::after { content: ""; line-height: 200px;}.child { display: inline-block; background: red;}</style><div class="box"> <div class="child">水平垂直居中</div></div>运行后:
6.还有一种奇葩的方法这个奇葩方式和第三种使用定位相似，
只不过需要给子元素设置 position: absolute; 设置固定宽度和高度;
top、left、bottom、right都设置为0; margin设置为auto；也能实现垂直水平居中
<style>.box { width: 200px; height: 200px; border: 1px solid; position: relative;}.child { background: red; width: 100px; height: 40px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;} </style><div class="box"> <div class="child">水平垂直居中</div></div>运行后:
以上就是一些我们常用的垂直居中的方法,咱们下期见!!!
上一篇：育空地区的落基山羊，加拿大 (© Mark Newman/Getty Images)(育空领地)
下一篇：达特穆尔国家公园的薄雾，英格兰德文郡 (© AWL Images/Danita Delimont)(达特穆尔动物园)
