1、水平居中
三种情况:
(1)是内联或内(行内元素)(inline- *)元素(比如文本或链接)?
(2)块级元素?
(3)超过一个块级元素吗?
2、垂直居中
两种情况:
(1)是内联或内联(行内元素)(inline- *)元素(比如文本或链接)
(2)块级元素
3、水平垂直居中
可以结合上述技术以任何方式得到完美的中心元素。通常分为三个阵营:
(1)固定宽度和高度的元素
(2)未知的宽度和高度的元素
(3)可以用弹性布局flexbox
以下详细介绍上述的情况:
参照网址:https://css-tricks.com/centering-css-complete-guide/
1、水平居中
三种情况:
(1)是内联或内(行内元素)(inline- *)元素(比如文本或链接)?
(2)块级元素?
(3)超过一个块级元素吗?
(1)是内联或内联(inline- *)元素(比如文本或链接)
在一个块级父元素中,可以水平居中行内元素
.center-children {
text-align: center;
}
这将为内联工作,inline-block、inline-table inline-flex等等
例子:
HTML代码:
<header> This text is centered. </header> <nav role='navigation'> <a href="#0">One</a> <a href="#0">Two</a> <a href="#0">Three</a> <a href="#0">Four</a> </nav>
css代码:
body { background: #8ee8f0; } header, nav { text-align: center; background: white; margin: 20px 0; padding: 10px; } nav a { text-decoration: none; background: #333; border-radius: 5px; color: white; padding: 3px 8px; }
样式结果:
(2)块级元素
可以通过给它margin-left中心一个块级元素和margin-right auto(和它有一个宽度,否则它会完整的宽度和不需要定心)。常用于速记是这样的:
.center-me {
margin: 0 auto;
}
这将工作无论什么块级元素的宽度你定心,或父级元素。
请注意,您不能浮动元素的中心。
例子:
HTML代码:
<main> <div class="center"> I'm a block level element and am centered. </div> </main>
css代码:
body { background: #b3f0ee; } main { background: white; margin: 20px 0; padding: 10px; } .center { margin: 0 auto; width: 200px; background: black; padding: 20px; color: white; }
样式结果:
(3)多个块级元素
1、两个或两个以上的块级元素需要连续集中水平,很有可能你会更好的让他们不同的显示类型。
可以让他们转化为行内元素inline-block 或用弹性布局 flexbox。
例子:
HTMl代码:
<main class="inline-block-center"> <div> I'm an element that is block-like with my siblings and we're centered in a row. </div> <div> I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div> <div> I'm an element that is block-like with my siblings and we're centered in a row. </div> </main> <main class="flex-center"> <div> I'm an element that is block-like with my siblings and we're centered in a row. </div> <div> I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div> <div> I'm an element that is block-like with my siblings and we're centered in a row. </div> </main>
css代码:
body { background: #b3f0ee; font-size: 80%; } main { background: white; margin: 20px 0; padding: 10px; } main div { background: black; color: white; padding: 15px; max-width: 125px; margin: 5px; } .inline-block-center { text-align: center; } .inline-block-center div { display: inline-block; text-align: left; } .flex-center { display: flex; justify-content: center; }
样式结果:
2、多个块级元素堆叠在彼此之上
例子:
HTMl代码:
<main> <div> I'm an element that is block-like with my siblings and we're centered in a row. </div> <div> I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div> <div> I'm an element that is block-like with my siblings and we're centered in a row. </div> </main>
css代码:
body { background: #b3f0ee; font-size: 80%; } main { background: white; margin: 20px 0; padding: 10px; } main div { background: black; margin: 0 auto; color: white; padding: 15px; margin: 5px auto; } main div:nth-child(1) { width: 200px; } main div:nth-child(2) { width: 400px; } main div:nth-child(3) { width: 125px; }
样式结果:
2、垂直居中
两种情况:
(1)是内联或内联(行内元素)(inline- *)元素(比如文本或链接)
(2)块级元素
(1)是内联或内联(行内元素)(inline- *)元素(比如文本或链接)
1、是否是一行?
a.有时内联/文本元素可以出现垂直居中,仅仅因为他们等于填充上方和下方.
可以通过只设置padding的上下边距
.link{
padding-top:50px;
padding-bottom: 50px;
}
例子:
HTML代码:
<main> <a href="#0">We're</a> <a href="#0">Centered</a> <a href="#0">Bits of</a> <a href="#0">Text</a> </main>
css代码:
body { background: #b3f0ee; font-size: 80%; } main { background: white; margin: 20px 0; padding: 50px; } main a { background: black; color: white; padding: 40px 30px; text-decoration: none; }
样式结果:
b.如果知道宽度、高度;则可以通过属性
.line-height来垂直居中
例子:
HTML代码:
<main> <div> I'm a centered line. </div> </main>
css代码:
body { background: #b3f0ee; font-size: 80%; } main { background: white; margin: 20px 0; padding: 40px; } main div { background: black; color: white; height: 100px; line-height: 100px; padding: 20px; width: 50%; white-space: nowrap; }
样式结果:
2、是否多行?
a.可以使用
vertical-align: middle;
例子:
HTMl代码:
<table> <tr> <td> I'm vertically centered multiple lines of text in a real table cell. </td> </tr> </table> <div class="center-table"> <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p> </div>
css代码:
body { background: #b3f0ee; font-size: 80%; } table { background: white; width: 240px; border-collapse: separate; margin: 20px; height: 250px; } table td { background: black; color: white; padding: 20px; border: 10px solid white; /* 默认是 vertical-align: middle; */ } .center-table { display: table; height: 250px; background: white; width: 240px; margin: 20px; } .center-table p { display: table-cell; margin: 0; background: black; color: white; padding: 20px; border: 10px solid white; vertical-align: middle;
}
样式结果:
b.如果表状的东西,可以用弹性布局flex box,一个flex-child可以在flex-parent中心很容易
平等填充在顶部和底部的集中效应可以给多个记住,只有真正相关父容器是否有一个固定的高度(px,%等),
这就是为什么这里的容器有一个高度
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
例子:
HTMl代码:
<div class="flex-center"> <p>I'm vertically centered multiple lines of text in a flexbox container.</p> </div>
css代码:
body { background: #b3f0ee; font-size: 80%; } div { background: white; width: 240px; margin: 20px; } .flex-center { background: black; color: white; border: 10px solid white; display: flex; flex-direction: column; justify-content: center; height: 200px; resize: vertical; overflow: auto; } .flex-center p { margin: 0; padding: 20px; }
样式结果:
c. 可以采用“幽灵元素”技术,在全高度伪元素放置在容器和文本是垂直对齐。
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
例子:
HTMl代码:
<div class="ghost-center"> <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p> </div>
css代码:
body { background: #b3f0ee; font-size: 80%; } div { background: white; width: 240px; height: 200px; margin: 20px; color: white; resize: vertical; overflow: auto; padding: 20px; } .ghost-center { position: relative; } .ghost-center::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .ghost-center p { display: inline-block; vertical-align: middle; width: 190px; margin: 0; padding: 20px; background: black; }
样式结果:
(2)块级元素
三种情况:
(1)知道元素的高度
(2)未知元素的高度
(3)可以用弹性布局flexbox
(1)知道元素的高度
知道高度后:子元素可以通过绝对定位来垂直居中,注:父元素必须是定位过的元素
.parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* 如果不是怪异盒模型 box-sizing: border-box; */ }
例子:
html代码:
<main> <div> I'm a block-level element with a fixed height, centered vertically within my parent. </div> </main>
css代码:
body { background: #b3f0ee; font-size: 80%; } main { background: white; height: 300px; margin: 20px; width: 300px; position: relative; resize: vertical; overflow: auto; } main div { position: absolute; top: 50%; left: 20px; right: 20px; height: 100px; margin-top: -70px; background: black; color: white; padding: 20px; }
样式结果:
(2)未知元素的高度
不知道父元素高度:也可以通过绝对定位,垂直居中,通过向Y轴平移50%
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
例子:
html代码:
<main> <div> I'm a block-level element with an unknown height, centered vertically within my parent. </div> </main>
css代码:
body { background: #b3f0ee; font-size: 80%; } main { background: white; height: 300px; margin: 20px; width: 300px; position: relative; resize: vertical; overflow: auto; } main div { position: absolute; top: 50%; left: 20px; right: 20px; background: black; color: white; padding: 20px; transform: translateY(-50%); resize: vertical; overflow: auto; }
样式结果:
(3)可以用弹性布局flexbox
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
例子:
html代码:
<main> <div> I'm a block-level element with an unknown height, centered vertically within my parent. </div> </main>
css代码:
body { background: #b3f0ee; font-size: 80%; } main { background: white; height: 300px; width: 200px; padding: 20px; margin: 20px; display: flex; flex-direction: column; justify-content: center; resize: vertical; overflow: auto; } main div { background: black; color: white; padding: 20px; resize: vertical; overflow: auto; }
样式结果:
3、从水平和垂直方向上
可以结合上述技术以任何方式得到完美的中心元素。通常分为三个阵营:
(1)固定宽度和高度的元素
(2)未知的宽度和高度的元素
(3)可以用弹性布局flexbox
(1)固定宽度和高度的元素
绝对定位它在50% / 50%
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
例子:
html代码:
<main> <div> I'm a block-level element a fixed height and width, centered vertically within my parent. </div> </main>
css代码:
body { background: #b3f0ee; font-size: 80%; padding: 20px; } main { position: relative; background: white; height: 200px; width: 60%; margin: 0 auto; padding: 20px; resize: both; overflow: auto; } main div { background: black; color: white; width: 200px; height: 100px; margin: -70px 0 0 -120px; position: absolute; top: 50%; left: 50%; padding: 20px; }
样式结果:
(2)未知的宽度和高度的元素
如果你不知道宽度或高度,可以通过绝对定位top: 50%;left: 50%;后;再通过平移transform: translate(-50%,-50%);来居中
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
例子:
html代码:
<main> <div> I'm a block-level element of an unknown height and width, centered vertically within my parent. </div> </main>
css代码:
body { background: #b3f0ee; font-size: 80%; padding: 20px; } main { position: relative; background: white; height: 200px; width: 60%; margin: 0 auto; padding: 20px; resize: both; overflow: auto; } main div { background: black; color: white; width: 50%; transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; padding: 20px; resize: both; overflow: auto; }
样式结果:
(3)可以用弹性布局flexbox
flexbox中心两个方向,您需要使用两个定心属性
.parent { display: flex; justify-content: center; align-items: center; }
例子:
html代码:
<main> <div> I'm a block-level-ish element of an unknown width and height, centered vertically within my parent. </div> </main>
css代码:
body { background: #b3f0ee; font-size: 80%; padding: 20px; } main { background: white; height: 200px; width: 60%; margin: 0 auto; padding: 20px; display: flex; justify-content: center; align-items: center; resize: both; overflow: auto; } main div { background: black; color: white; width: 50%; padding: 20px; resize: both; overflow: auto; }
样式结果:
总结:
1、看是否为内联元素(inline-*)行内元素 或是块级元素
2、是否多个元素?
3、是否给定宽度或高度?