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