元素水平垂直居中的四种方法
目录
- 方法一：使用flex布局
- 方法二：使用transform将元素进行移动，必要时可将margin设为负值（需要知道元素的尺寸）
- 方法三：通过改变父元素和子元素的position属性实现居中效果
- 方法四：子元素设置display: inline-block，父元素设置text-align: center且line-height等于height
- 写在最后
方法一：使用flex布局
将父元素的display属性设为flex、justify-content和align-items属性都设为center，可以让子元素在父元素内水平垂直居中显示。如果希望父元素覆盖整个浏览器视口，可以将父元素的高设置为100vh、宽设置为100vw（css3规定1vh等于视口高度的1%、1vw等于视口宽度的1%），这样子元素就会显示在页面的正中间。
示例
<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://blog.csdn.net/m0_53610112/article/details/112806367）
方法三：通过改变父元素和子元素的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，同样可以让子元素在页面上水平垂直居中
写在最后
以上为全部内容，感谢阅读。
本博文仅为学习记录和分享交流，如有错漏，还请帮忙指出，也欢迎更多补充，不胜感激。
GitHub地址：https://github.com/ljxlijiaxin.