居中,是我们编码过程中最常见的,那么,我们平时常见的居中方式,下面一一罗列出来,有错误的地方,望码友多多包涵并加以矫正。
水平居中
1、多块级元素,设置display:inline-block;使之在一行排列,在父级样式里,设置text-align:center;就可以实现水平居中的效果
body {
text-align: center;
}
div{
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
}
2、内联元素,利用text-align:center;可以实现块级元素内部的内联元素的水平居中
div {
border: 1px solid red;
width: 100px;
height: 100px;
text-align: center;
}
<div>
<span>块级元素中的行内元素的水平居中</span>
</div>
3、块级元素,通过把固定宽高的块级元素的margin-left和margin-right设置为auto,方可实现
div{
width: 100px;
height: 100px;
border: 1px solid;
margin: 0 auto;
}
<div></div>
4、利用弹性盒子(display: flex;)
给父级定宽定高,然后设置display: flex;以及justify-content: center;方可达到水平居中效果
body {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
border: 1px solid red;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
}
<body>
<div></div>
</body>
垂直居中
1、内联元素(单行)
通过设置元素的height和line-height,方可达到居中效果
2、多行元素,利用表布局(table)
通过给想要居中的元素的父级设置display: talbe-cell;以及vertical-align:enter;方可居中
3、弹性盒子(flex)
给父级设置display: flex;变成弹性盒子。
分两种,
(1),主轴方向为水平,直接设置 align-items: center;
(2),主轴方向为垂直,设置flex-direction: column;改变主轴方向,然后设置justify-content: center;
弹性盒模型主轴不同,居中的方式也不同,灵活应用。
4、固定宽高的块级元素
利用父相子绝的定位原理,实现垂直居中
position: absolute;
left: 50%;
top: 50%;
margin-left: (自身高度的一半);
5,未知宽高的块级元素
利用transform: translateY(-50%);方可实现
position: absolute;
top: 50%;
transform: translateY(-50%);
水平垂直方向的居中
1、固定宽高
通过margin平移整体宽高的一半,实现水平垂直居中
{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
2、未知宽高
利用transform中的translate()属性实现
{
position: absolute;
border: 1px solid;
left: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
}
3、弹性盒子(flex)
通过display:flex,把父级变成弹性盒模型,利用align-items: center;justify-content: center;方可实现居中。
注意:弹性盒子容器中,多行项目的居中方式另加计算。
body {
border: 1px solid;
width: 300px;
height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div {
border: 1px solid;
width: 100px;
height: 100px;
}
随着学习的不断深入,居中方式可以有很多种,我们要善于利用,更加明确什么情况下用怎样的居中方式。