|
因为需要居中对齐的元素有可能会有position属性，所以先说一下relative和absolute一下区别
relative
是相对于自身元素的定位，不会对别的元素产生干扰
absolute
是相对于最近的一层父级元素的定位，如果没有找到具有定位元素的父级元素，则是相对于body元素的定位
水平居中的方式
inline元素：text-align: center;
block元素：margin: auto;
absolute元素：left：50%，margin-left负值(这个值是居中元素的宽度的一半)
block元素：设置position：relative，left：50%，子元素向左位移50%；transform: translateX(-50%)
flex布局
block元素：父元素：position:relative;子元素：absolute，left、right设为0，然后margin: auto
1. text-align: center 和 margin: auto比较简单，比如以下代码：
.inline-item {
background-color: #ccc;
text-align: center;
}
.block-parent {
border: 1px solid red;
height: 100px;
}
.block-item {
height: 60px;
width: 100px;
background-color: #ccc;
margin: 0 auto;
}
inline元素
block元素
效果如下：
2. 接下来看absolute元素
.absolute-parent {
border: 1px solid red;
height: 100px;
}
.absolute-item {
height: 60px;
width: 100px;
background-color: #ccc;
position: absolute;
left: 50%;
}
absolute元素
子div设置了left:50%以后，最左边就会移动到父div的中间线位置，所以为了居中，还需要把子div向左移动(-子div宽度/2)px，所以要加上margin-left：-50px;
.absolute-item {
height: 60px;
width: 100px;
background-color: #ccc;
position: absolute;
left: 50%;
margin-left: -50px; /*把子div向左移动宽度的一般距离*/
}
效果如下：
3. block元素：子元素设置position：relative，left：50%，子元素向左位移50%；transform: translateX(-50%)
.transform-parent {
border: 1px solid red;
height: 100px;
}
.transform-item {
height: 60px;
width: 100px;
background-color: #ccc;
position: relative;
left: 50%;
transform: translateX(-50%);/*向左位移50%的宽度*/
}
transform元素
4. flex布局
.flex-parent {
display: flex;
border: 1px solid red;
height: 100px;
justify-content: center;
}
flex元素
垂直居中的方式
inline元素: line-height等于height的值可以实现近似居中（为什么会近似居中而不是居中，请看这篇详情）
block元素：flex布局
block元素：父元素：position:relative;子元素：absolute，margin-top负值（height/2）
block元素：子元素：position:relative;，transform: translateY(-50%)
block元素：父元素：position:relative;子元素：absolute，top、bottom设为0，然后margin: auto
1. inline元素
.inline-parent {
height: 100px;
border: 1px solid #d8d8d8;
line-height: 100px;
}
inline元素
2. block元素 flex布局
.block-parent {
height: 100px;
border: 1px solid #d8d8d8;
display: flex;
align-items: center;
}
.block-item {
height: 50px;
width: 50px;
background-color: darkturquoise;
}
block元素
3. block元素 父元素：position:relative;子元素：absolute，margin-top负值（height/2）
.absolute-parent {
height: 100px;
border: 1px solid #d8d8d8;
position: relative;//必须设置position属性，不然子元素就不是相对于父元素定位了
}
.absolute-item {
height: 50px;
width: 100px;
background-color: darkturquoise;
position: absolute;
top: 50%;// 此时子元素的上边框是在父元素的垂直中线位置，所以需要用margin-top来向上移动
margin-top: -25px;
}
absolute元素
4. transform实现方式
.transform-parent {
height: 100px;
border: 1px solid #d8d8d8;
}
.transform-item {
height: 50px;
width: 100px;
background-color: darkturquoise;
position: relative;
top:50%; /*左上角在父元素的左边框的中间位置，所以需要把子元素向上位移50%的高度 */
transform: translateY(-50%)/*向上位移50%子元素的高度*/
}
transform元素
5. block元素：父元素：position:relative;子元素：absolute，top、bottom设为0，然后margin: auto
.margin-parent {
height: 100px;
border: 1px solid #d8d8d8;
position: relative;
}
.margin-item {
height: 50px;
width: 100px;
background-color: darkturquoise;
position: absolute;
top:0;
bottom: 0;
margin: auto;
}
margin元素
|