CSS基础-10种居中方法

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS基础-10种居中方法

10种居中方法如下。从技术角度讲,适用于“水平垂直居中”的方法必然适用于“水平居中”和“垂直居中”的情况;适用于不定宽(高)居中的方法也必然适用于固定宽(高)居中的情况。项目中根据实际需求选用最优最简洁的方法。

CSS基础-10种居中方法

以一组demo分别介绍不同方案,demo结构如下,页面需要居中的元素是“center”。“parent”,“brother”分别是“center”的父元素和兄弟元素(有需要的时候添加)。


 div class="center"内容/div

CSS代码:


.center {
    /* keycodes start */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    /* keycodes end */
    background-color: #666600;
}

适用范围:

这种方法只有支持CSS3新属性transform的浏览器才能用,不需要固定宽高,需要给父元素加 position: relative。

2、不定宽高元素 flex布局

父元素设置display: flex; align-items: center;justify-content: center。

HTML代码:


div class="parent"
      div class="center"内容/div
 /div

CSS代码:


.parent {
      /* keycodes start */
       display: flex;
       align-items: center;
       justify-content: center;
        /*keycodes end */
       height: 100%;
}
 .center {
       background-color: #666600;
}

适用范围:

适用于支持flex布局的浏览器,不需要固定宽高,在移动端用的会比较多。

3、固定宽高元素 50%定位+负margin

父元素设置相对定位:position:relative(不设置的话,相对最近的非static定位的元素或者body定位)。

自身设置绝对定位position:absolute;定位top:50%,left:50%;设置margin-top:-height/2,margin-left:-width/2。

HTML代码:


div class=" center "内容/div

CSS代码:


.center {
    /* 关键代码-start */
     position: absolute;
     left: 50%;
     top: 50%;
     width: 200px;
     height: 200px;
     margin-top: -100px;
     margin-left: -100px;
     /* 关键代码-end */
      background-color: #666600;
}

适用范围:

这种方法基本浏览器都能够兼容,适用于固定宽高的元素, 需要给父元素加 position: relative。

4、固定宽高元素 0定位+margin:auto

父元素设置相对定位:position:relative(不设置的话,相对最近的非static定位的元素或者body定位)。

自身设置绝对定位position:absolute;定位 top: 0;right: 0;bottom: 0; left: 0;设置margin:auto。

HTML代码:


div class=" center "内容/div

CSS代码:


.center {
   /* keycodes start */
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: 200px;
   height: 200px;
   margin: auto;
   /* keycodes end */
   background-color: #666600;
}

适用范围:

适用于固定宽高的元素,需要给父元素加 position: relative。

5、固定宽度元素 margin :0 auto

给自身设置margin :0 auto。

HTML代码:


div class=" center "内容/div

CSS代码:


 .center {
    /* keycodes start */
    width: 200px;
    margin: 0 auto;
    /* keycodes end */
    background-color: #666600;
}

适用范围:

适用于宽度固定的元素水平居中。

6、行内元素 text-align: center

给父元素设置text-align: center;

HTML代码:


div class="parent"
    span class="center"行内元素/span
/div

CSS代码:


.parent {
    /* keycodes start */
    text-align: center;
    /* keycodes end */
}
.center {
   background-color: #666600;
}

适用范围:

适用于行内元素水平居中,但是需要额外增加父标签。

7、文本 text-ali**gn: center**

文本居中只需要给自身设置text-align: center。

HTML代码:


div class=" center "内容/div

CSS代码:


 .center {
    /* keycodes start */
    text-align: center;
    /* keycodes end */
    background-color: #666600;
}

8、不定高度元素 display: inline-block;vertical-align: middle。

自身设置display: inline-block;vertical-align: middle,兄弟元素设置display: inline-block;height: 100%;vertical-align: middle。

HTML代码:


div class="center"内容/div
div class="brother"/div

CSS代码:


.center {
     /* keycodes start */
    display: inline-block;
    vertical-align: middle;
     /* keycodes end */
    background-color: #666600;
}
.blank {
    /* keycodes start */
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
   /* keycodes end */
}

适用范围:

适用于高度不确定的元素居中,需要额外增加兄弟标签。 

9、固定高度多行文本 display:table-cell;vertical-align:middle。

父元素设置display:table,自身设置display:table-cell 、vertical-align:middle。

HTML代码:


div class="parent"
      div class="center"内容/div
 /div

CSS代码:


.parent {
    /* keycodes start */
    display: table;
   /* keycodes end */
}
.center {
    /* keycodes start */
    display: table-cell;
    height: 200px;
    vertical-align: middle;
    /* keycodes end */
    background-color: #666600;
}

适用范围:

适用于固定高度的多行文本垂直居中。

10、固定高度单行文本 line-height

自身设置line-height等于高度。

HTML代码:


div class=" center "内容/div

CSS代码:

.center {
   height: 200px;
   line-height: 200px;
   background-color: #666600;
}

如果你有其它好的居中方法,欢迎留言交流~

CSS基础-10种居中方法

始发于微信公众号: 前端麻辣烫

本人花费半年的时间总结的《Java面试指南》已拿腾讯等大厂offer,已开源在github ,欢迎star!

转载声明:转载请注明出处,本技术博客是本人原创文章

本文GitHub https://github.com/OUYANGSIHAI/JavaInterview 已收录,这是我花了6个月总结的一线大厂Java面试总结,本人已拿大厂offer,欢迎star

原文链接:blog.ouyangsihai.cn >> CSS基础-10种居中方法


 上一篇
CSS基础-​position CSS基础-​position
position是规定元素的定位类型属性,它的值有absolute、relative、fixed、static(static)、inherit。需要注意的是,绝对定位absolute和固定定位fixed元素会隐式地转换为块级元素,而不论该元
2021-04-05
下一篇 
css动画 css动画
css动画 首先要明白动画是一帧一帧的,由多个帧拼起来的动画 @keyframes此为动画样式中的关键帧,用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分 其指示了一个过程到另一个过程的过程 关键帧还具有名字,在应用
2021-04-05