A+

所属分类：Web前端

摘要

将父元素的display属性设为flex、justify-content和align-items属性都设为center，可以让子元素在父元素内水平垂直居中显示。如果希望父元素覆盖整个浏览器视口，可以将父元素的高设置为100vh、宽设置为100vw（css3规定1vh等于视口高度的1%、1vw等于视口宽度的1%），这样子元素就会显示在页面的正中间。
示例

便宜好用的国外VPS推荐

方法一：使用flex布局

<body> <div id="parent">     <div id="children"></div> </div> <style>     body{         margin: 0;         padding: 0;     }     #parent{         display: flex;         justify-content: center;         align-items: center;         width: 500px;         height: 500px;         background-color: #999;     }     #children{         width: 50px;         height: 50px;         background-color: red;     } </style> </body>

元素水平垂直居中的四种方法
图1-子元素在父元素内水平垂直居中

<style>     body{         margin: 0;         padding: 0;     }     #parent{         display: flex;         justify-content: center;         align-items: center;         width: 100vw;         height: 100vh;         background-color: #999;     }     #children{         width: 50px;         height: 50px;         background-color: red;     } </style>

元素水平垂直居中的四种方法
图2-子元素在整个页面内水平垂直居中

方法二：使用transform将元素进行移动，必要时可将margin设为负值（需要知道元素的尺寸）

通过transform属性的translate方法将子元素进行移动，这需要事先知道子元素和父元素的尺寸以计算出移动的距离。必要时（例如父元素与子元素宽高的单位不同不方便计算时）可以将子元素的margin设为负值，让子元素向左和向上方各移动其本身宽高的一半。
示例

<style>     body{         margin: 0;         padding: 0;     }     #parent{         width: 500px;         height: 500px;         background-color: #999;     }     #children{         width: 50px;         height: 50px;         background-color: red;         transform: translate(225px,225px);     } </style>

元素水平垂直居中的四种方法
图3-已知父元素和子元素的具体尺寸，可以通过计算将子元素移动一定的距离使其恰好在父元素内水平垂直居中

<style>     body{         margin: 0;         padding: 0;     }     #parent{         width: 100vw;         height: 100vh;         background-color: #999;         overflow: hidden;     }     #children{         width: 50px;         height: 50px;         background-color: red;         transform: translate(50vw,50vh);         margin-top: -25px;         margin-left: -25px;     } </style>

元素水平垂直居中的四种方法
图4-父元素的宽高单位是vw和vh，只用transform进行移动的话不方便计算移动的距离，可以先移动50vw和50vh，再将子元素的margin设为负值实现水平垂直居中（给第一个子元素加margin-top，父元素会跟着移动，所以要在父元素上加上overflow: hidden，具体可参考我的另一篇博客：https://www.cnblogs.com/ljxlijiaxin/p/14297565.html）

方法三：通过改变父元素和子元素的position属性实现居中效果

给父元素设置一个不为默认值的position属性，再将子元素的position属性设为fixed或absolute。然后将子元素的top、bottom、left、right属性都设为0，同时margin设为auto；或者将子元素的top、bottom、left、right属性都设为50%，不需要设置margin: auto，给子元素加上transform: translate(-50%,-50%)即可，这两种写法都能实现子元素在父元素内水平垂直居中。
示例

<style>     body{         margin: 0;         padding: 0;     }     #parent{         width: 100vw;         height: 100vh;         background-color: #999;         position: relative;     }     #children{         width: 50px;         height: 50px;         background-color: red;         position: absolute;         top: 0;         bottom: 0;         left: 0;         right: 0;         margin: auto;     } </style>

<style>     body{         margin: 0;         padding: 0;     }     #parent{         width: 100vw;         height: 100vh;         background-color: #999;         position: relative;     }     #children{         width: 50px;         height: 50px;         background-color: red;         position: absolute;         top: 50%;         bottom: 50%;         left: 50%;         right: 50%;         transform: translate(-50%,-50%);     } </style>

元素水平垂直居中的四种方法
图5-上述两种写法都能实现子元素水平垂直居中

方法四：子元素设置display: inline-block，父元素设置text-align: center且line-height等于height

将子元素设为行内块元素，父元素设置左右居中，同时通过让父元素的line-height属性等于height属性实现子元素上下居中。
示例

<style>     body{         margin: 0;         padding: 0;     }     #parent{         width: 100vw;         height: 100vh;         line-height: 100vh;         background-color: #999;         text-align: center;     }     #children{         width: 50px;         height: 50px;         background-color: red;         display: inline-block;     } </style>

元素水平垂直居中的四种方法
图6-将父元素的width设为100vw、height和line-height设为100vh，同样可以让子元素在页面上水平垂直居中