以下讨论的是和相关的CSS中常见的水平垂直居中的实现方法有哪些?CSS中三种常见的水平垂直居中 教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:
这篇文章给大家介绍的内容是关于CSS中常见的水平垂直居中的实现方法有哪些?CSS中三种常见的水平垂直居中,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。当不知道子元素的宽和高的时候,如何实现子元素的水平垂直居中,这里总结了几种方法:
1、利用定位和transform实现
HTML和CSS代码如下:
.super-div { width: 400px; height: 300px; border: 1px solid black; } .sub-div { background-color: green; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); /* top left 分别相对于父元素的高度和宽度,translate相对于自身的宽度和高度 */ }利用定位和transform
实现水平垂直居中
这种实现方式的核心在于注释部分,相对定位的时候,top和left都是相对于父元素的高度和宽度计算,而transform是相对与自身宽高计算; 效果如下:
2、利用table-cell布局实现
HTML和CSS代码实现如下:
.super-div { width: 400px; height: 300px; border: 1px solid black; } .table { display: table; } .table-cell { display: table-cell; /*垂直居中*/ vertical-align: middle; /*水平居中*/ text-align: center; background-color: green; }利用table-cell
实现水平垂直居中
父元素设置table布局,子元素设置为table-cell布局。然后实现子元素的垂直水平居中,效果如下:
3、利用flex布局实现
HTML和CSS代码如下:
.super-div { width: 400px; height: 300px; border: 1px solid black; } .flex { display: flex; /*flex布局*/ justify-content: center; /*使子项目水平居中*/ align-items: center; /*使子项目垂直居中*/ } .flex-center { background-color: green; }利用flex布局
实现水平垂直居中
实现效果如下:
关于CSS中常见的水平垂直居中的实现方法有哪些?CSS中三种常见的水平垂直居中的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/
a/2018080995922.shtml方便下次再访问哦。