CSS - 垂直水平居中方法

liaosilzu2007 发布于2019-08-02 16:09 / 2463人阅读

摘要：参考链接整理搬运垂直水平居中方法，区分内联元素与块级元素垂直居中和水平居中原用让一个容器水平垂直内联元素居中方法水平居中设置行内元素设置布局设置灵活运用垂直居中设置父元素高度确定的单行文本内联元素，垂直居中设置父元素高度确定的多行文本

参考链接

整理搬运css垂直水平居中方法，区分内联元素与块级元素

CSS垂直居中和水平居中

【原】用css让一个容器水平垂直

内联元素居中方法

水平居中设置:

行内元素设置 text-align:center;

Flex布局设置display:flex;justify-content:center;(灵活运用)

垂直居中设置：

父元素高度确定的单行文本（内联元素），垂直居中：

设置 height = line-height；

父元素高度确定的多行文本（内联元素），垂直居中：

先设置 display:table-cell 再设置 vertical-align:middle；

如果在块级元素中包裹有多个行内元素，其中某个元素比较特殊，比如：大写加粗的文字、图片图标，垂直居中：

该元素设置 { vertical-align: middle; }
/* 同时对应 text-bottom/text-top 为下对齐/上对齐 */

块级元素居中方法

移动端，选用方法六和方法七，支持不定宽高的情况
PC端，要考虑兼容性的话，可以选用方法四
PC端，如果中间的元素高度不固定，可以选用方法五

方法一：position加margin
兼容性：主流浏览器均支持，IE6不支持



    


/**css**/
.wrap {
    position: relative;
    width: 200px;
    height: 200px;
    background: pink;
}
.wrap .content{
    position: absolute;
    width: 100px;
    height: 100px;
    background: skyblue;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

方法二： diaplay:table-cell
兼容性：由于display:table-cell的原因，IE67不兼容



     


/*css*/
.wrap{
    width: 200px;
    height: 200px;
    background: pink;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.content{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background: skyblue;
}

方法三：position加 transform
兼容性：ie9以下不支持 CSS3新属性transform，移动端表现较好



    


/* css */
.wrap {
    position: relative;
    background: pink;
    width: 200px;
    height: 200px;
}
.content{
    position: absolute;
    background: skyblue;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    width: 100px;
    height: 100px;
}

方法四：position（固定宽高）
兼容性：适用于所有浏览器



   


/* css */
.wrap {
    background: pink;
    width: 200px;
    height: 200px;
    position: relative;
}
.content{
    background: skyblue;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-left:-50px;
    margin-top:-50px;
}

方法五：兼容低版本浏览器，不固定宽高



    
        不固定宽高，自适应
    


/*css*/
.table {
    height: 200px;/*高度值不能少*/
    width: 200px;/*宽度值不能少*/
    display: table;
    position: relative;
    float:left;
    background: pink;
}      

.tableCell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
    *position: absolute;
    padding: 10px;
    *top: 50%;
    *left: 50%;
}
.content {
    *position:relative;
    *top: -50%;
    *left: -50%;
     background: skyblue;
}

方法六：flex;align-items: center;justify-content: center
适合移动端



    


/* css */
.wrap {
    background: pink;
    width: 200px;
    height: 200px;
    display: flex; 
    /*垂直居中*/
    align-items: center; 
    /*水平居中*/
    justify-content: center;
}
.content{
    background: skyblue;
    width: 100px;
    height: 100px;
}

方法七：display:flex;margin:auto
适合移动端



   


/* css */
.wrap {
    background: pink;
    width: 200px;
    height: 200px;
    display: flex; 
}
.content{
    background: skyblue;
    width: 100px;
    height: 100px;
    margin: auto;
}

GPU云服务器云服务器水平垂直居中垂直居中实现垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54766.html

CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等，只需给父元素设置即可实现。 1、水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。 .center{ te...

scwang90 2019-08-30 14:19 评论0 收藏0
CSS-水平居中、垂直居中、水平垂直居中

摘要：水平居中水平居中可分为行内元素水平居中和块级元素水平居中行内元素水平居中这里行内元素是指文本图像按钮超链接等，只需给父元素设置即可实现。 1、水平居中水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中这里行内元素是指文本text、图像img、按钮超链接等，只需给父元素设置text-align:center即可实现。 .center{ te...

Lsnsh 2019-08-02 10:04 评论0 收藏0
【第1期】聊聊css居中那点事

摘要：前言居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊居中的那点事。我是水平居中的同样是针对块级元素才有效果。来看代码我是水平居中的必须配合来使用来可以实现居中的效果。方法二我是垂直居中的注意此方法要考虑的兼容性问题。前言：居中是网页布局中再常见不过的一种方式了，今天我们就来聊聊css居中的那点事。我们主要从这几个方面来了解下居中：水平居中垂直居中水平垂直居中水平...

刘永祥 2019-08-30 15:55 评论0 收藏0
主流的CSS水平和垂直居中技术大全

摘要：水平居中行内元素的水平居中在父元素中设置只对内联元素或行内块元素有效需要放置于父元素中块级元素的水平居中只对块级元素有效指的是自适应宽度。参考张鑫旭实现绝对定位元素的居中及原理居中方式水平居中垂直居中块级元素设置内联元素设置。原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html 几个月也零零散散学...

KoreyLee 2019-08-29 16:26 评论0 收藏0