注册 | 登陆
您的位置:阿里西西 > 前端技术 > CSS教程 > 详细内容

CSS中常见的水平垂直居中的实现方法有哪些?CSS中三种常见的水平垂直居中

  稿源:互联网   2018-08-09 02:30:30   点击:   撤稿纠错

以下讨论的是和相关的CSS中常见的水平垂直居中的实现方法有哪些?CSS中三种常见的水平垂直居中 教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:

这篇文章给大家介绍的内容是关于CSS中常见的水平垂直居中的实现方法有哪些?CSS中三种常见的水平垂直居中,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

当不知道子元素的宽和高的时候,如何实现子元素的水平垂直居中,这里总结了几种方法:

1、利用定位和transform实现

HTML和CSS代码如下:

利用定位和transform
实现水平垂直居中
.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相对于自身的宽度和高度 */ }

这种实现方式的核心在于注释部分,相对定位的时候,top和left都是相对于父元素的高度和宽度计算,而transform是相对与自身宽高计算; 效果如下:

2、利用table-cell布局实现

HTML和CSS代码实现如下:

     
利用table-cell
实现水平垂直居中
.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布局,子元素设置为table-cell布局。然后实现子元素的垂直水平居中,效果如下:

3、利用flex布局实现

HTML和CSS代码如下:

利用flex布局
实现水平垂直居中
.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; }

实现效果如下:


关于CSS中常见的水平垂直居中的实现方法有哪些?CSS中三种常见的水平垂直居中的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/ a/2018080995922.shtml方便下次再访问哦。