css的实现元素垂直居中

JayChen 发布于2019-08-01 15:01 / 3041人阅读

摘要：经常在写代码的时候碰到垂直居中的问题，我一般用的多的是绝对定位加负的或者来实现居中。但是因为它有固定高度，其实并不能和上下都间距为，因此会使它居中。子清除浮动，并显示在中间。

经常在写代码的时候碰到垂直居中的问题，我一般用的多的是绝对定位加负的margin或者display: table来实现居中。但是实际项目中，常常有一些特殊的情况，让上述方法使用起来并不是那么的靠谱。因此，更多行之有效的方法就显得尤为重要了。

说明部分

本文不考虑浏览器的兼容问题，仅仅是提供一些方法供参考，实际开发时请根据实际情况选择。特别是在现在流行的响应式页面中，高度不固定的情况下，可能部分效果不适合使用。能力有限，更多方法请联系我后期添加。

正文开始

为了方便下文说明，我们先统一html为：


    子div居中

1. 子元素有高度的情况 1.1 绝对定位和负的margin:

这个方法使用绝对定位的 div，把它的 top 设置为 50％，margin-top 设置为负的 div 高度的一半。

#parent {
    position: relative;
    width: 600px;
    height: 600px;
    background-color: #ccc;
}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
    background-color: #fff;
}

1.2 绝对定位和margin:auto：

这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto 会使它居中。

#parent {
    position: relative;
    width: 600px;
    height: 600px;
    background-color:#ccc;
}
#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width:100px;
    height:100px;
    background-color: #fff;
}

1.3 清除浮动:

这种方法，在子div外插入一个div。设置此 div height:50%; margin-bottom为负的子div的height。子div清除浮动，并显示在中间。

更改上面的html为下面的:


      
    子div居中

css为:

#parent{ 
    width: 600px; 
    height: 600px;
    background-color: #ccc;
}
#floater {
    float: left;
    height: 50%;
    margin-bottom: -50px;
    background-color: #f00;
}
#child {
    clear: both;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: #fff;
}

2. 子元素自适应高度的情况 2.1 div 的显示方式设置为表格：

父div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align

#parent {
    width:600px; 
    height:600px;
    display: table;
    background-color:#ccc;
}

#child {
    display: table-cell;
    vertical-align: middle;
    background-color:#0f0;
}

2.2 css3的transform 的 translate 属性:

先将元素定位到容器的中心位置，然后使用 transform 的 translate 属性，将元素的中心和父容器的中心重合，从而实现垂直居中

#parent {
      position: relative;
    width: 600px;
    height:600px;
    overflow: hidden;
    background-color:#ccc;
}

#child{
    position: absolute;
    top: 50%;
    background-color: #0f0;
    transform: translateY(-50%);
}

使用 transform 有一个缺陷，就是当计算结果含有小数时（比如 0.5），会让整个元素看起来是模糊的，一种解决方案就是为父级元素设置 transform-style: preserve-3d; 样式：

#parent{
    -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
}

#child {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
}

2.3 flexbox

使用 flexbox 实现水平和垂直居中，只需使用两条居中属性即可

#parent{ 
    width:600px;
    height:600px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#eee;
}
#child {
    background-color: #0f0;
}

前端初学者用作整理知识之用，错误之处请指正

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

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

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

【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Apollo 2019-08-30 14:15 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

Scholer 2019-08-02 16:14 评论0 收藏0
【基础】这15种CSS居中的方式，你都用过哪几种？

摘要：水平居中内联元素水平居中利用可以实现在块级元素内部的内联元素水平居中。此方法对内联元素内联块内联表元素水平居中都有效。核心代码演示程序演示代码垂直居中单行内联元素垂直居中通过设置内联元素的高度和行高相等，从而使元素垂直居中。简言 CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。...

mayaohua 2019-08-29 18:44 评论0 收藏0
CSS/CSS3 实现居中（水平&垂直）

摘要：，水平居中行内元素把行内元素放在一个属性块元素中，然后设置父层元素属性居中，水平居中块状元素设置外边距，水平居中多个块状元素把块状元素属性，然后设置父层元素属性居中，水平居中多个块状元素布局实现把块状元素的父元素属性和，如下设置， 1，水平居中：行内元素把行内元素放在一个属性块（display：block）元素中，然后设置父层元素属性居中： .test { text-align:ce...

genedna 2019-08-02 15:27 评论0 收藏0