本文简单介绍一下现代 CSS 中最常见的三种水平垂直居中方案。
html:
html
<div class="container">
<div class="content"></div>
</div>
css:
css
.container {
width: 500px;
height: 500px;
border: 1px solid #000;
.content {
width: 200px;
height: 200px;
background-color: #ccc;
}
}
Flex 布局
方案1:父元素设置 flex 布局,并设置主轴以及交叉轴的对齐方式:
css
.container {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
.content {
width: 200px;
height: 200px;
background-color: #ccc;
}
}
方案2:父元素设置 flex 布局,子元素设置 margin: auto
:
css
.container {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
.content {
width: 200px;
height: 200px;
background-color: #ccc;
margin: auto;
}
}
Grid 布局
父元素设置 grid 布局,以及 place-items: center
。place-items
是 align-items
和 justify-items
的简写形式。
Grid 的兼容性不如 Flex,对于一些比较老的浏览可能不太支持。
css
.container {
width: 500px;
height: 500px;
border: 1px solid #000;
display: grid;
place-items: center;
.content {
width: 200px;
height: 200px;
background-color: #ccc;
}
}
绝对定位 absolute
使用绝对定位会使元素脱离文档流,一般常用于弹窗、对话框等。
父元素设置相对定位,子元素设置绝对定位,设置 top、left 以及 transform。
css
.container {
position: relative;
width: 500px;
height: 500px;
border: 1px solid #000;
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #ccc;
}
}
top
和left
属性都设置为50%。这会将.content
元素的左上角定位到其父元素(.container
)的中心。transform: translate(-50%, -50%);
被应用到.content
元素上。这会将.content
元素自身向左和向上移动其自身宽度和高度的50%,从而使得.content
元素的中心与其父元素的中心对齐,实现了居中。