css-元素居中

miqt 发布于2019-08-29 18:39 / 2171人阅读

摘要：一水平居中行内元素水平居中使用属性可以实现在行内元素包括在块级父元素水平居中。使用负已知高度宽度使用使用使用三水平垂直居中公共结构块级元素垂直居中。

本文重要是汇总了关于水平居中，垂直居中，还有水平垂直居中的各种方法。

一、水平居中

1.行内元素水平居中

使用text-align:center;属性可以实现在行内元素（包括：inline,inline-block、inline-table、inline-flex）在块级父元素水平居中。

css样式:

html结构：


    我是inline


    我是inline-block


     我是inline-table


     我是inline-flex

2.块级元素水平居中

块级元素水平居中的方法有很多，下面会一一列举：

a.将元素的左右外边距设置为auto。

cssy样式：
.child{
        margin: 0 auto;
  }

b.使用absolute+transdorm

 父元素相对定位，子元素绝对定位 left:50%，然后向左移动子元素一般的宽度达到水平居中。

css样式：

html结构：


  使用absolute+transdorm

c.使用flex+justify-content
css3的flex布局具有兼容性问题，使用需谨慎。

css样式：

html结构：


  flex+justify-content

d.使用flex+margin
父元素设为flex布局，在设置子元素居中

css样式：

html结构


  flex+margin

3.多个块级元素水平居中

html结构：


    多级块元素水平居中
    多级块元素水平居中
    多级块元素水平居中

公用样式
.parent{
        border: 1px solid rosybrown;
    }
   .chlid{
       width: 50px;
       background: papayawhip;
       margin-right: 10px;
   }

css样式1——flex布局

css样式2-inline-block + text-align: center

4.浮动元素水平居中

公用html结构：


   需要居中的子元素

1.定宽浮动元素，通过relative+margin

css样式：

2.不定宽，父子元素设置相对定位

css样式：

3.利用flex布局（通用不管定宽还是不定宽）

5.绝对定位元素水平居中

 
    让绝对定位的元素水平居中对齐。
  
  .parent{
        position:relative;
    }
   .child{
         position: absolute; /*绝对定位*/
         width: 200px;
         height:100px;
         background: yellow;
         margin: 0 auto; /*水平居中*/
         left: 0; /*此处不能省略，且为0*/
         right: 0;/*此处不能省略，且为0*/
    }

二、垂直居中

1. 单行内联元素垂直居中


     单行内联元素垂直居中。。

2.多行内联元素垂直居中

a.利用flex布局（flex）


    Dance like nobody is watching, code like everybody is.
    Dance like nobody is watching, code like everybody is.
    Dance like nobody is watching, code like everybody is.

3.块级元素垂直居中

公共html结构

    块级元素垂直居中。

a.使用absolute+负margin(已知高度宽度)

 .parent {
   position: relative;
}
.child {
   position: absolute;  
   top: 50%;
   height: 100px;
   margin-top: -50px;
}

b.使用absolute+transform

.parent {
   position: relative;
}
.child {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

c.使用flex+align-items

.parent {
    display:flex;
    align-items:center;
}

d.使用table-cell+vertical-align

 .parent {
    display: table-cell;
    vertical-align: middle;
  }

三、水平垂直居中

公共html结构

    >块级元素垂直居中。

方法一：绝对定位与负边距实现（已知高度宽度）

 .parent {
   position: relative;
 }
 .child {
   position: absolute;
   top: 50%;
   left: 50%;
   margin: -50px 0 0 -50px;
 }

方法二：绝对定位与margin:auto （已知高度宽度）

.parent {
   position: relative;
   height:200px;//必须有个高度
}
.child {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;//注意此处的写法
}

方法三：绝对定位+CSS3(未知元素的高宽)

.parent {
  position: relative;
}
 .child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法四：flex布局

 .parent {
   height:200px;//必须有高度
   display: flex;
   justify-content: center;
   align-items: center;
 }

方法五：flex/grid与margin:auto

.parent {
  height:200px;//必须有高度
  display: grid;
}
.child {
  margin: auto;
}

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

转载请注明本文地址：https://www.ucloud.cn/yun/114482.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.水平居中：行内元素解决方案适用元素：文字，链接，及其其它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种。...

Apollo 2019-08-30 14:15 评论0 收藏0