CSS实现div居中方法
问：
请举出CSS实现div居中效果的方式？
解：居中分为水平居中，垂直居中，水平-垂直居中三中情况
水平居中
本节内容参考：https://www.w3cplus.com/css/elements-horizontally-center-with-css.html
实现1：外边距自适应
方式：元素绑定属性：margin: 0 auto;
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; background-color: #aaa; }
.div-child { width: 100px; height: 50px; background-color: #007FFF; margin: 0 auto; } style> <div class="div-child">div> div> |
效果：
注意：
常用，适用于已知父级元素宽度的情况
实现2：行内块元素
方式：父级元素设置属性：text-align: center;
子一级元素设置属性：display: inline-block;
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; background-color: #aaa; text-align: center; }
.div-child { width: 100px; height: 50px; background-color: #007FFF; display: inline-block; } style> <div class="div-child">div> div> |
效果如图：
注意：
inline-block存在浏览器兼容性问题
另行处理因设置inline-block带来的副作用。
实现3：使用定位
方式：父级元素设置属性：position: relative;
子一级元素设置属性：position: absolute;
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; background-color: #aaa; position: relative; } .div-child { width: 80px; height: 50px; background-color: #007FFF; position:absolute; left: 40%; } style> <div class="div-child">div> div> |
效果如图：
注意：
适用于父级元素宽度已知的情况。
居中定位自己设置比较麻烦。
实现4：浮动+定位居中
方式：设三层父子元素嵌套，居中显示的是最里层的元素
父级元素不做特殊设置；
子一级元素设置属性：float: left; left:50%;position: relative;
子二级元素设置属性：float: left;right: 50%;position: relative;
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; background-color: #aaa; } .div-child { width: 80px; height: 50px; border: 1px solid #010101; float: left; left: 50%; position: relative; } .div-child-child { width: 80px; height: 50px; background-color: #007FFF; float: left; right: 50%; position: relative; } style> <div class="div-child"> <div class="div-child-child">
div> div> div> |
效果如下：
注意：
实现起来比较麻烦，需要考虑浮动的其他操作带来的影响。
实现5：flex布局
方式：父级元素设置为flex容器 display: flex;justify-content:center;
子一级元素不做特别处理
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; background-color: #aaa; display: flex; justify-content: center; } .div-child { width: 80px; height: 50px; background-color: #007FFF; } style>
<div class="div-child"> div> div> |
效果如下：
注意：
支持IE10+，需要另行想办法解决浏览器问题
补充：fit-content实现
方式：子一级元素的width属性值为：fit-content
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; background-color: #aaa; } .div-child { width: fit-content; height: 50px; background-color: #007FFF; margin: 0 auto; } style>
<div class="div-child"> 要点内容 div> div> |
效果如下：
注意：
子一级元素因没有设置具体宽度，所以，由内容撑开。
该方法兼容性差。
垂直居中
实现1：通过定位
方式：父级元素添加属性：position:relative;
子一级添加属性：position: absolute; margin: auto 0;
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; background-color: #aaa; position:relative; } .div-child { width: 100px; height: 40px; background-color: #007FFF; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto 0; } style>
<div class="div-child">
div> div> |
效果如下：
实现2：表格属性
方式：父级元素设置为表格属性：display: table-cell; vertical-align: middle;
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; background-color: #aaa; display: table-cell; vertical-align: middle; } .div-child { width: 100px; height: 40px; background-color: #007FFF; } style>
<div class="div-child">
div> div> |
效果如下：
实现3：flex布局
方式：父级元素设置弹性布局：display: flex; align-items:center;
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; background-color: #aaa; display: flex; align-items:center; } .div-child { width: 100px; height: 40px; background-color: #007FFF; } style>
<div class="div-child">
div> div> |
效果如下：
注意：
浏览器兼容性较差。IE10+
实现4：边距互补
方式：父级元素添加属性：position:relative;
子一级添加属性：position: absolute; margin: auto 0;设置互补量
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; background-color: #aaa; position:relative; } .div-child { width: 100px; height: 40px; background-color: #007FFF; margin:auto 0; position:absolute; top:50%; margin-top: -20px; /*需要计算回填的值 */ } style>
<div class="div-child">
div> div> |
效果如下：
注意：
样例是已知父元素高度；也可按比例来需自设置，比较麻烦。
需考虑浏览器版本问题：IE7+
实现5：行内块元素
方式：父级元素设置属性：height: 200px;line-height: 200px;
子一级元素设置属性：display: inline-block;
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; line-height: 200px; background-color: #aaa; } .div-child { width: 100px; height: 40px; background-color: #007FFF; display: inline-block; } style>
<div class="div-child">
div> div> |
效果如下：
注意：
需已知父级div高度
补充：填充占位
方式：父级元素设置内边距：padding-top: 80px;
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 120px; background-color: #aaa; padding-top: 80px; } .div-child { width: 100px; height: 40px; background-color: #007FFF; } style>
<div class="div-child">
div> div> |
效果如图：
注意：
样例已知父级元素高度。也可用用比例设置。
类似的也可以通过增加一个一级子元素来占位的方式实现。
补充：占位互补
方式：定义两个兄弟子节点，其中一个用作占位
| <div class="div-parent"> <style> .div-parent { width: 400px; height: 200px; line-height: 200px; background-color: #aaa; } .div-child1 { width: 99%; height: 50%; border: 1px solid #111; } .div-child2 { width: 100px; height: 40px; background-color: #007FFF; margin-top: -20px; /*本选择器的一半高度*/ } style>
<div class="div-child1"> div> <div class="div-child2"> div> div> |
效果如下：
注意：
需要设置补位的高度。
水平-垂直居中
水平居中和垂直居中相结合，可参考如下链接：
https://blog.csdn.net/liufeifeinanfeng/article/details/78615567
https://www.w3cplus.com/css/elements-horizontally-center-with-css.html
https://www.cnblogs.com/gwcyulong/p/6251342.html