参考文章:
https://juejin.im/post/5a7a9a545188257a892998ef
https://www.w3cplus.com/css/centering-css-complete-guide.html
https://segmentfault.com/a/1190000013966650?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly#articleHeader15
https://www.w3cplus.com/css/float-center.html
https://juejin.im/post/5c8f9e595188252db756920c
https://zhuanlan.zhihu.com/p/25068655
https://github.com/yanhaijing/vertical-center
https://juejin.im/entry/583b954b61ff4b006b55b43d
1.水平居中
01 行内元素 text-align:center
.parent {
text-align: center;
}
span{
border: 1px solid blue;
}
<div class="parent">
<span class="child">child</span>
</div>
02 块级元素 margin:auto
.child1{
text-align: center;
width: 100px;
border: 1px solid blue;
margin: auto;
}
<div class="parent1">
<div class="child1">child</div>
</div>
03 多个块级元素
如果要让多个块级元素在同一水平线上居中,那么可以修改它们的 display 值。这里有两个示例,其中一个使用了 inline-block 的显示方式,另一个使用了 flexbox 的显示方式:
body {
background: #f06d06;
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;
}
<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>
总结:水平居中分三种情况,行内、块级、多个块级,分别解决方法是text-align:center
、margin:auto
、display`:inline-block
或者flex布局 display:flex;justify-content: center;
2.垂直居中
参考文章:
https://juejin.im/entry/583b954b61ff4b006b55b43d
https://www.w3cplus.com/css/centering-css-complete-guide.html
第一种情况:单行+行内/具有行内元素性质的元素
01 行内元素(单行文字垂直居中):设置line-height=height
.parent {
height: 200px;
line-height: 200px;
border: 1px solid red;
}
01 行内元素(单行文字垂直居中):设置padding让上下内边距相等
body{
background: #f06d06;
}
main {
background: white;
margin: 20px 0;
padding: 50px;
}
main a{
background: black;
color: white;
padding: 40px 30px;
text-decoration: none;
}
<main>
<a href="#0">We're</a>
<a href="#0">Centered</a>
<a href="#0">Bits of</a>
<a href="#0">Text</a>
</main>
第二种情况:多行+行内/具有行内元素性质的元素
02 利用table/table-cell布局
首先要知道table中td默认情况下vertical-align: middle;
,所以我们可以利用table/table-cell布局,实现多行垂直居中。
text-align是设置或检索对象中文本的左中右对齐方式。
vertical-align是用于指定元素的上下垂直对齐方式。
text-align和vertical-align更多可以参考:
https://www.jianshu.com/p/ba232268f573
https://www.cnblogs.com/keyi/p/5924563.html
https://blog.csdn.net/zhuobin_tian/article/details/70169664
https://blog.csdn.net/diudiu5201/article/details/54666809
*{
margin: 0px;
padding: 0px
}
body {
background: #f06d06;
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;
/* default is 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;
}
<table>
<tr>
<td>
I'm vertically centered multiple lines of text in a real table cell.
</td>
<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>
02 利用flex布局
如果没法用类table方式,可能你需要用 flexbox:
.flex-center{
display: flex;
border: 1px solid #0000FF;
height: 200px;
width: 1600px;
justify-content:center;
align-items:center;
}
<div class="flex-center">
<p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>
请记住这个方法仅仅适用于父容器具有一个固定的额高度(px,%,等等),这也是为什么容器有一个高度。
02 幽灵元素(ghost element)/虚元素
利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。
如果上述方法都不起作用,那么你就需要使用被称为幽灵元素(ghost element)的非常规解决方式:在垂直居中的元素上添加伪元素,设置伪元素的高等于父级容器的高,然后为文本添加 vertical-align: middle; 样式,即可实现垂直居中。
附注:
resize和overflow一起使用可以设置调整div元素的大小:
div
{
resize:both;
overflow:auto;
}
还可以参考:https://www.cnblogs.com/cpt666/p/6718643.html
body {
background: #f06d06;
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;
}
<div class="ghost-center">
<p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>
第三种情况:块级元素
03 知道元素的高度:绝对定位
我们知道居中元素的高度和宽度,垂直居中问题就很简单。通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可以实现垂直居中了。
.parent {
position: relative;
height: 200px;
}
.child {
width: 80px;
height: 40px;
background: blue;
position: absolute; //
left: 50%; //
top: 50%; //
margin-top: -20px; //
margin-left: -40px; //
}
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
margin: 20px;
width: 300px;
position: relative;
resize: vertical;
overflow: auto;
}
main div {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
background: black;
color: white;
}
<main>
<div>
I'm a block-level element with a fixed height, centered vertically within my parent.
</div>
</main>
03 块级元素 元素高度未知:绝对定位+transform
优点:不需要提前知道尺寸
缺点:兼容性不好
.parent {
position: relative;
height: 200px;
}
.child {
width: 80px;
height: 40px;
position: absolute; //
left: 50%; //
top: 50%; //
transform: translate(-50%, -50%); //
background: blue;
}
03 块级元素:绝对定位 + margin: auto
优点:不需要提前知道尺寸,兼容性好
缺点:这个方法是我最喜欢用的一个,要说缺点的话,我目前还不知道。
参考文章:https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-绝对定位-水平垂直居中/
.parent {
position: relative;
height: 200px;
background: red;
}
.child {
width: 80px;
height: 40px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: blue;
}
03 块级元素:padding
缺点:如果高度固定,需要提前计算尺寸(只在某些特定情况适用)。
.parent {
padding: 5% 0;
}
.child {
padding: 10% 0;
background: blue;
}
03 块级元素:display: flex
缺点:兼容性不好
.parent {
width: 600px;
height: 200px;
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center; /*水平居中*/
}
.child {
background: blue;
}
03 块级元素:calc()
也是个不错的方法。
缺点:兼容性较差,需要计算。
.parent {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.child {
width: 100px;
height: 100px;
background: blue;
padding: -webkit-calc((100% - 100px) / 2);
padding: -moz-calc((100% - 100px) / 2);
padding: -ms-calc((100% - 100px) / 2);
padding: calc((100% - 100px) / 2);
background-clip: content-box;
}
03 块级元素:inline-block
.parent {
width: 400px;
height: 400px;
border: 1px solid red;
position: relative;
}
.child, .brother {
display: inline-block;
vertical-align: middle;
}
.child {
background: blue;
font-size: 12px;
}
.brother {
height: 400px;
font-size: 0;
}
<div class="parent">
<div class="child">child</div>
<div class="brother">brother</div>
</div>
其他 当然,还有一种方法,就是使用table布局: