中,是我们编码过程中最常见的,那么,我们平时常见的居中方式,下面一一罗列出来,有错误的地方,望码友多多包涵并加以矫正。
水平居中
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;
}
随着学习的不断深入,居中方式可以有很多种,我们要善于利用,更加明确什么情况下用怎样的居中方式。
里是工作狂的聚集地 | ||||
职场 | 学术 | 新媒体 | 设计 | 极客 |
专门治愈处女座强迫症。
本文为CSS入门
翻译 redman9
原载CSS-Trick
人们经常抱怨在 CSS 中居中元素的问题,其实这个问题并不复杂,只是因为方法众多,需要根据情况从众多方法中选取一个出来。接下来,我们做一个 "决定树" 来帮我们把问题变的简单一点。首先你需要居中:
—— 水平 ——
•需要居中inline
或者inline-*
元素(如文字或者链接)?
• 需要居中block
类的元素?
• 需要居中多个block
元素?
—— 垂直 ——
•需要居中inline
或者inline-*
元素(如文字或者链接)?
•需要居中block
类的元素?
——既水平又垂直 ——
•固定宽高
•不固定宽高
•使用flexbox
● ● ●
水平居中
inline
或者inline-*
元素▼你可以轻松的在一个block
元素中水平居中一个inline
元素,以下代码对inline
,inline-block
,inline-table
和inline-flex
等有效。
.parent {
text-align: center;
}
block
类的元素▼在block
元素被设定固定宽度的情况下,可以使用设置元素margin-left
和margin-right
的值为auto
的方法实现水平居中。
.child {
width: 400px;
margin: 0 auto;
}
block
类的元素▼通过inline-block
实现
.parent {
text-align: center;
}
.child {
display: inline-block;
text-align: left;
}
通过flexbox
实现
.parent {
display: flex;
justify-content: center;
}
● ● ●
inline
或者inline-*
元素▼inline/text
元素可以简单的用设置相同的上下padding
值达到垂直居中的目的。.center {
pading-top: 30px; padding-bottom: 30px;
}
如果因为某种原因不能使用padding
的方法,你还可以设置line-height
等于height
来达到目的。
.center {
height: 100px; line-height: 100px; white-space: nowrap;
}
【多行】
相同的上下padding
也可以适用于此种情况,如果不能生效,你可以尝试将该元素的父元素的display
设置为table
,同时该元素的display
设置为table-sell
,然后设置vertical-align
。
.parent {
display: table;
width: 200px; height: 400px;
} .child {
display: table-cell;
vertical-align: middle;
}
如果上述方法不能使用,你可以尝试使用flexbox
,一个单独的flexbox
子元素可以轻易的在其父元素中居中。谨记,这种方法需要父元素有固定的高度。
.parent {
display: flex; justify-content: center;
flex-direction: column; height: 400px;
}
如果上述两种方式均不能使用,你可以使用“幽灵元素”技术,这种方法采用伪元素::before
撑开高度 ,文字垂直居中。
.parent {
position: relative;
} .parent::before {
content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle;
} .child {
display: inline-block;
vertical-align: middle; }
垂直居中block
类的元素▼
【已知元素高度】
.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; */
}
【未知元素高度】
.parent {
position: relative; } .child {
position: absolute;
top: 50%;
transform: translateY(-50%); }
【使用flexbox
】
.parent {
display: flex;
flex-direction: column;
justify-content: center; }
● ● ●
.parent {
position: relative; } .child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px; }
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); }
【使用flexbox
】
.parent { display: flex; justify-content: center; align-items:center; }
上又要到秋招的时候了,又有不少人打算换工作了。前端在面试中总会被问到的一道基础题div居中方法,这里给大家总结一下都有哪些常用的方法。
还未偏移一半自身宽高
<style>
.parent {
position: relative;
width: 500px;
height: 500px;
border: solid red 1px;
}
.demo {
position: absolute;
width: 100px;
height: 100px;
border: solid blue 1px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<body>
<div class="parent">
<div class="demo"></div>
</div>
</body>
通过flex弹性布局设置垂直居中和水平居中
<style>
.parent {
width: 500px;
height: 500px;
border: solid red 1px;
display: flex;
// 垂直,水平居中
align-items: center;
justify-content: center;
}
.demo {
width: 100px;
height: 100px;
border: solid blue 1px;
}
</style>
<body>
<div class="parent">
<div class="demo"></div>
</div>
</body>
在子元素不知道自身宽高情况,使用transform进行比偏移。
<style>
.parent {
position: relative;
width: 500px;
height: 500px;
border: solid red 1px;
}
.demo {
position: absolute;
border: solid blue 1px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="parent">
<div class="demo">居中</div>
</div>
</body>
以上3种是常用的方法,当然还有其他居中方法比如grid布局,table-cell布局等。
*请认真填写需求信息,我们会在24小时内与您取得联系。