作者:雅茹敬俐6999 | 来源:互联网 | 2020-08-08 13:53
本篇文章给大家带来的内容是关于css中垂直水平居中的实现方法总结(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
最近看到很多面试题目会问:请说出几种使用css完成垂直水平居中的方法?正好看css基础的时候看到一篇文章是讲完全居中的,这边对于文章中的内容做个小结
一、使用absolute(Absolute Centering)
1.1 具体代码如下:
.container {
position: relative;
}
.absolute_center {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
margin: auto;
padding: 20px;
overflow: auto;
}
-
该方法的核心思想是是使用绝对定位布局,使当前元素脱离正常的流体特性,而使用absolute的流体特性
2.必须增加overflow属性来阻止如果内容的文本高度超出外层容器时出现的溢出情况;
二、负值外补洞法(negative margins)
这可能是目前最常用的方法,在元素的高度以及宽度是固定数值的时候,通过设置该元素为相对布局脱离文档流,并设置top: 50%; left: 50%;,使用margin-left以及margin-top使元素完全居中。
2.1 具体代码如下:
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.is-Negative {
position: absolute;
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -120px;
background-color: cornsilk;
}
3.当元素使用box-sizing:border-box和使用默认的content-box偏移量是不一样的,需要重新计算;
三、使用Transforms
3.1 具体代码如下:
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: darkseagreen;
}
4.在有些时候会出现边缘模糊的情况,这是浏览器渲染的问题,尤其是使用了transform-style: preserve-3d属性的时候
四、使用Table-Cell
这可能是最好的垂直居中的方案,但存在一个最大的问题,需要额外的html元素,要使用table-cell完成垂直居中效果需要3个元素来完成。
4.1 具体代码如下:
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Table {
display: table;
}
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: deepskyblue;
}
@import "./absolute_center4.png"{width="50%"}
4.2 该方法的核心思想是:
使用表格来实现垂直居中,再使用margin: 0 auto;来实现水平居中。
具体操作步骤如下:
1.设置父元素为块级表格;
2.设置子元素为表格单元格;
3.给子元素添加vertical-align:middle属性,此单元格已实现垂直居中;
4.设置子元素中的内容的宽度,添加margin: 0 auto;属性,使子元素水平居中。
4.3 优缺点:
优点:
1.内容高度自适应;
2.如果子元素的内容溢出,会拉伸父元素的高度;
3.兼容性好,兼容到IE8;
缺点:
1.完成一个垂直居中效果,需要3个html元素;
五、使用Inline-block
这也是一种常用的垂直水平居中的方法,但会存在一个问题:当内容的宽度大于容器宽度-0.25em的时候,会发生内容上移到顶部的方法,所以需要一些小的技巧来避免这样的问题。
5.1 具体代码如下:
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Inline {
text-align: center;
overflow: auto;
}
.container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
background-color: greenyellow;
padding: 20px;
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}
2.内容的宽度必须小于容器的宽度减去0.25em。
六、使用Flexbox
弹性布局是当前移动端比较流行的布局方式,它可以很优雅的完成垂直水平居中效果。
6.1 具体代码如下:
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.center_block {
background-color: wheat;
padding: 20px;
}
3.各个浏览器的表现可能会有一些差异;以上就是css中垂直水平居中的实现方法总结(附代码)的详细内容,更多请关注 第一PHP社区 其它相关文章!