css水平垂直居中

sihai 发布于2019-04-22 16:12 / 1644人阅读

摘要：上面达不到需求，可以考虑使用定位，移动端能使用就使用垂直居中，单行文本，使用等于父元素高度，如果不行，就可以设置父元素，能解决一大部分问题，如果还不行就考虑定位配合，使用。

1.CSS的水平居中，

1.1 父元素是块状元素，子元素为行内元素的居中，直接设置text-aglin: center ,常见的文本，span 标签，button,img等行内元素都是可以使其水平居中的

.box{
 text-align: center;
 div 
 span 11111 /span 
 button 123 /button 
 /div

1.2 父元素为块状元素，子元素也为块状元素

1.2.1 子元素宽度已知，则可以设置子元素 margin 0 auto,就可以使子元素相对于父元素水平居中

 style 
 .box{
 background-color: pink;
 .con-box{
 width: 300px;
 margin: 0 auto;
 height: 30px;
 background-color: aqua;
 /style 
 div 
 div 
 /div 
 /div

1.3 父元素为块状元素，子元素为块状元素宽度不定，直接设置子元素display:inline, 然后设置父元素的text-aglin:center

 style 
 .box{
 background-color: pink;
 text-align: center
 .con-box{
 display: inline;
 /style 
 div 
 div 
 111111
 /div 
 /div

注：使用弹性布局，使用定位，都是可以使子元素相对于父元素水平居中的

2.垂直居中

2.1 父元素为块状元素，子元素为行内元素，如单行文本，直接设置父元素的line-height 等于父元素的高度，

 style 
 .box{
 background-color: pink;
 height: 50px;
 line-height: 50px;
 .con span{
 line-height: 50px;
 /style 
 div 
 span 111111 /span 
 /div

2.2 父元素为块状元素，子元素为多行文本，则设置父元素的line-height 等于父元素高度除于行数，

.box{
 background-color: pink;
 height: 50px;
 line-height: 25px;
 .con span{
 line-height: 50px;
 div 
 span 111111 /span br 
 span 111111 /span br 
 /div

2.3 父元素为块状元素，子元素也为块状元素，

2.3.1 子元素高度未知，改变父元素的display 属性设置为 table-cell,然后设置vertical-align:middle;

 style 
 .box{
 background-color: pink;
 height: 50px;
 display: table-cell;
 vertical-align:middle;
 .box .con-box{
 background-color: aqua;
 /style 
 div 
 div 
 1111
 /div 
 /div

2.3.2 子元素高度已知，则设置margin-top，元素高度减去子元素高度除于2; 记住一定要设置父元素的overflow: hidden;

（相邻块状元素 margin会共享，取最大值，不设置overflow: hidden，子元素的margin-top:10px 会跑到父元素上）

 style 
 .box{
 background-color: pink;
 height: 50px;
 overflow: hidden; 
 .box .con-box{
 margin-top: 10px;
 height: 30px;
 line-height: 30px;
 background-color: aqua;
 /style 
 div 
 div 
 1111
 /div 
 /div

2.3.3 子元素为图片，直接可以设置父元素display: table-cell; vertical-align: middle;

 style 
 .box{
 background-color: pink;
 height: 450px;
 display: table-cell; 
 vertical-align: middle; 
 /style

2.3.4 子元素为多个，比如图片，外加别的行内元素，使用2.3.3，文本可以不用改变，必读给图片加 vertical-align: middle;

 style 
 .box{
 background-color: pink;
 height: 450px;
 display: table-cell; 
 vertical-align: middle; 
 img{
 vertical-align: middle
 /style 
 div 
 img src="../xunguang-4.jpg" alt="" 
 span 12123123 /span 
 1111111
 /div

3.CSS 水平垂直居中上面两两组和使可以实现的，我们主要看一下定位和flex 实现水平垂直居中

3.1子元素高度未知，高度已知的块状元素水平垂直居中，（宽度未知，块状元素肯定使占满整行的，就不存在水平居中了）

3.1.1使用定位配置，配合margin 0 auto ,top 50%,宽度未知，只能使用transform:translateY(-50%);

 style 
 .box{
 background-color: pink;
 height: 450px; 
 position: relative; // relative 默认沾满整行，absolute话，未设置宽度则由子元素撑开 
 overflow: hidden; 
 .box .con-box{
 position: relative;
 width: 300px;
 margin: 0 auto;
 background-color: aqua;
 top:50%;
 transform: translateY(-50%);
 /style 
 div 
 div 
 123123123123
 1222222222
 /div 
 /div

3.1.2，使用定位，子元素 left 0 right 0 top 0 bottom 0 margin auto （一定要注意父子元素的定位属性）

 style 
 .box{
 background-color: pink;
 height: 450px; 
 position: relative; /* 父元素一定为relative */ 
 overflow: hidden; 
 .box .con-box{
 position: absolute; /* *子元素一定 为absolete*/
 width: 300px;
 background-color: aqua;
 top:0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 /style 
 div 
 div 
 123123123123
 1222222222
 /div 
 /div

3.2 ，子元素宽度，高度都已知，3.1 上的两种方法都适用宽度高度已经的子元素水平垂直居中

3.2.1 margin-top: -width/2 具体的值， transform: translateY(-50%) 这个有兼容性问题，需要ie9以上，具体宽度值则无兼容性问题，

style .box{ background-color: pink; height: 450px; position: relative; overflow: hidden; .box .con-box{ position: relative; width: 300px; height: 400px; margin: 0 auto; background-color: aqua; top:50%; margin-top: -200px

4 flex 水平垂直居中

flex 主轴上居中，交叉轴上居中，flex 有很大的兼容性问题，一般用于移动端，很简单

style .box{ background-color: pink; height: 450px; display: flex; justify-content: center; align-items: center .box .con-box{ width: 300px; height: 400px; background-color: aqua;

总结

1.水平居中，能使用margin: 0 auto ,这最简单的，不能的话就把子元素转化成inline,然后使用text-aglin：center,无兼容性问题。

上面达不到需求，可以考虑使用定位，移动端能使用flex 就使用flex

2. 垂直居中，单行文本，使用line-height 等于父元素高度，如果不行，就可以设置父元素display:table-cell，vertical-align: middle;

能解决一大部分问题，如果还不行就考虑定位配合margin-top:-width/2，使用margin。移动端能使用flex 就使用flex.

如果您还有更好的方法，欢迎给我留言，共同学习，共同进步。up

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

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

转载请注明本文地址：https://www.ucloud.cn/yun/802.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
【基础】这15种CSS居中的方式，你都用过哪几种？

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

Apollo 2019-08-30 14:15 评论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居中解决方案了~

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

csRyan 2019-08-30 13:54 评论0 收藏0