垂直居中

dingding199389 发布于2019-08-29 12:42 / 3093人阅读

摘要：基于绝对定位基于视口单位百分比行不通，因为的百分比值是以父元素的宽度作为解析基准的。没错，即使对于和来说也是这样以下方法基于，，，单位，只适用于在视口中居中的场景。基于或注本文根据一书整理，便于查阅

基于绝对定位

main{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

基于视口单位

margin百分比行不通，因为margin的百分比值是以父元素的宽度作为解析基准的。没错，即使对于margin-top和margin-bottom来说也是这样！

以下方法基于vw，vh，vmin，vmax单位，只适用于在视口中居中的场景。

main{
    margin:50vh auto 0;
    transform:translateY(-50%);
}

基于Flexbox

body{
    display:flex;
    min-height:100vh;
    margin:0;
}

main{
    margin:auto;
}

或

main{
    display:flex;
    align-items:center;
    justify-content:center;
    width:18em;
    height:10em
}

注：本文根据《css secret》一书整理，便于查阅

专线服务服务器托管垂直居中实现垂直居中水平垂直居中文字垂直居中

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

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

网页设计的垂直居中

摘要：推荐阅读原文原文链接网页设计的垂直居中此系列为网页设计中经常使用到的垂直居中解决方法，通过本文进行详细地总结。推荐阅读原文原文链接：网页设计的垂直居中此系列为网页设计中经常使用到的垂直居中解决方法，通过本文进行详细地总结。使用line-height做垂直居中 See the Pen 使用line-height做垂直居中 by whjin (@whjin) on Co...

Scholer 2019-08-30 15:56 评论0 收藏0
水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中.......帮你搞定

摘要：包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素绝对定位的居中。样式水平居中的元素图片的水平居中图片的居中，比较特殊。 2018.05.29 居中一个元素？你会想到啥？这里面的知识还真不少。包括水平居中，垂直居中，还有水平垂直居中。如果要再要细分，还要分浮动元素、绝对定位的居中。为了代码简介，没有加背景和其他样式，需要看效果的，可以加上背景。目录：第一...

waterc 2019-08-29 15:32 评论0 收藏0
水平垂直居中

摘要：笔记整理之一水平垂直居中固定宽高一般使用负值进行居中不固定宽高一般使用和进行下面三种方案平常都很少被使用的到移动端一般使用方案在移动端都可以使用文本水平垂直居中文本垂直文本垂直居中移动端水平垂直居中垂直居中方案快级元素笔记整理之一：水平垂直居中 PC固定宽高、一般使用maring负值进行居中PC不固定宽高、一般使用relative和left进行下面三种方案平常都很少被使用的到 ...

incredible 2019-08-30 12:43 评论0 收藏0
水平垂直居中

摘要：笔记整理之一水平垂直居中固定宽高一般使用负值进行居中不固定宽高一般使用和进行下面三种方案平常都很少被使用的到移动端一般使用方案在移动端都可以使用文本水平垂直居中文本垂直文本垂直居中移动端水平垂直居中垂直居中方案快级元素笔记整理之一：水平垂直居中 PC固定宽高、一般使用maring负值进行居中PC不固定宽高、一般使用relative和left进行下面三种方案平常都很少被使用的到 ...

eechen 2019-08-01 14:54 评论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