css
0.如何实现一个元素的水平垂直居中
要求对行内元素、块状元素及不定宽高的块状元素均可适用:
可打开 codepen 进行调试 https://codepen.io/shanyue/pen/XWMdabg以下是布局代码
<div class="container">
<div class="item" style="width: 100px; height: 100px; background: #999;">
块状元素
</div>
</div>
<div class="container">
<div class="item">不定高宽的块状元素</div>
</div>
<div class="container">
<span class="item">行内元素</span>
</div>
.container {
// 把代码写在这里
}
.container {
height: 20rem;
background: #ccc;
margin: 1rem;
}
绝对定位方法:
.box {
postion: absolute;
top: 50%;
bottom: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
}
<body>
<div class="box"><div>
</body>
flex 方法:
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 50px;
height: 50px;
}
<body>
<div class="box"><div>
</body>
提供一些现代浏览器下使用 flex/grid 的方法,不仅支持块状元素,而且支持行内元素,对固定高宽与不固定高宽皆可使用。
使用 flex,以下是经典的垂直居中。
.container {
display: flex;
justify-content: center;
align-items: center;
}
效果可以见 codepen
.container {
display: grid;
justify-content: center;
align-content: center;
}
.container {
display: grid;
justify-content: center;
align-items: center;
}
.container {
display: grid;
justify-items: center;
align-content: center;
}
.container {
display: grid;
justify-items: center;
align-items: center;
}
三个属性略显啰嗦,其实只需两个属性即可:
.container {
display: grid;
place-items: center;
}
.container {
display: grid;
place-content: center;
}
引自:https://css-tricks.com/centering-css-complete-guide/ 1 该元素的宽高固定吗? 在将元素绝对定位为 top: 50%; left: 50%;后,可以使用值为宽的一半和高的一半的负 margin 实现垂直水平居中。(跨浏览器支持很不错)
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2 该元素宽高未知? (1)如果宽高未知,在将元素绝对定位为 top: 50%; left: 50%;后,可以使用 transform 属性来做负的 50%移动(基于当前元素宽高)。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
(2)也可以元素相对父容器绝对定位(left: 0;right: 0;top: 0;bottom: 0;)并 margin: auto,不需要提前知道尺寸兼容性好。
.container {
position: relative;
height: 300px;
border: 1px solid red;
}
.item {
width: 100px;
height: 50px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border: 1px solid green;
}
3 你要用 flexbox 吗? 对 flexbox 进行垂直水平居中,只需设置两个属性为 center: align-items、justify-content。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
4 你要用 grid 布局吗? 父容器设置为 grid 布局后,子元素直接 margin: auto;即可实现垂直水平居中。
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}
详细案例解释可参考:https://zhuanlan.zhihu.com/p/87134477
你不知道的 flex 布局~
.box {
display: flex;
}
.item {
margin: auto;
}
这个方法眼前一亮,试了一下: 行内元素与块状元素均可,学习了!
https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/