今天介绍一下在css使用中用到的居中知识,一共以下3点:
- 水平居中
- 垂直居中
- 水平垂直居中
1、水平居中
水平居中需要考虑3点:
- 行内或是行内元素居中?
- 块级元素居中?
- 多个块级元素居中?
行内或是行内元素居中:
这可以适用于inline, inline-block, inline-table, inline-flex
核心代码:
.center-children{text-align: center;}
块级元素居中:
无论是居中的块级元素的宽度还是父元素的宽度如何,这个方法都可以起作用。
核心代码:
.center-me{margin:auto;}
多个块级元素居中:
此方法有两个
inline-block方法:
父元素设置text-align: center; 居中子元素设置display:inline-block;text-align:left即可。
flex方法:
与左中右布局很像,父元素设置display: flex; justify-content: center;即可。
2、垂直居中
垂直居中需要考虑5点:
- 一行的行内或是行内元素居中?
- 多行的行内或是行内元素居中?
- 知道元素高度的块级元素居中?
- 未知元素高度的块级元素居中?
- 浏览器能否支持flex属性?
一行的行内或是行内元素垂直居中:
将行内的padding上下都设置相等即可居中,如果试图将一些不会换行的文本居中就需要加上line-height
的高度相等center
。
核心代码:
.a{padding-top:30px;padding-bottom:30px;}
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
多行的行内或是行内元素垂直居中:
正常情况下用行内的padding上下设置相等也可以做到居中,但如果这不起作用,则文本所在的元素可能是一个表格单元格,无论是字面上还是表现得像CSS。vertical-align
在这种情况下,该属性处理这个问题,不同于它通常处理行内对齐的元素的对齐。
知道元素高度的块级元素垂直居中:
父元素position: relative; 子元素position: absolute;然后top:50%;
核心代码:
.parent{
position: relative;
}
.child{
position: absolute;
top:50%;height:100px;
margin-top:-50px;/* account for padding and border if not using box-sizing: border-box; */
}
未知元素高度的块级元素垂直居中:
在元素高度的块级垂直居中代码基础上增加transform:translateY(-50%);,top:50%;下降一半,transform:translateY(-50%); 在50%的基础上再上升50%即可居中。
核心代码:
.parent{
position: relative;
}
.child{
position: absolute;
top:50%;
transform:translateY(-50%);
}
flex块级垂直居中:
如果你的浏览器不是IE6~9,那么恭喜你,你可以使用flex属性进行快速的垂直居中~
核心代码:
.parent{
display: flex;
flex-direction: column;
justify-content: center;
}
3、水平垂直居中
- 水平垂直居中需要考虑4点:
- 是固定高度和宽度的元素吗?
- 高度 和宽度是未知的元素吗?
- 浏览器能否支持flex属性?
- 如果只有一个行内元素?
固定高宽的水平垂直居中:
使用相当于宽度和高度的一半的负边距,父元素相对定位,子元素绝对定位到50%/ 50%,此方法兼容性非常好
核心代码:
.parent{
position: relative;
}
.child{
width:300px;
height:100px;
padding:20px;
position: absolute;
top:50%;
left:50%;
margin:-70px 0 0 -170px;
}
未知高宽的水平垂直居中:
如果您不知道宽度或高度,可以使用transform属性和两个方向的负平移(基于元素的当前宽度/高度)为中心
核心代码:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
flex水平垂直居中:
如果你的浏览器支持flex,可以很简单做到,你需要在父元素中使用两个居中属性
核心代码:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
gird水平垂直居中:
如你你只需将一个行内元素水平垂直居中,有一个小技巧,使用gird布局可以快速居中
核心代码:
parent {
height: 100%;
width: 300px;
display: grid;
}
child {
margin: auto;
}
你可以在css中做到所有的这些居中方法,是不是很简单~