css 之水平居中对齐

0 前言

初学css,对各种居中很是头疼,这里特地整理一下.

 

1 文字水平居中对齐及它的延伸写法

1.设置 text-align 属性 

 

例如:

 <h4 style="text-align: center;">测试标题1</h4>

具体解释:

CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐

MDN解释地址:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align

总结:

1.只能用于 块级元素内容(block containers) 的行内内容(文字,行内元素,行内块元素)的居中, 对行内元素本身设置是无效的.

例如 <i style="text-align: center;">测试标题1</i> 这种写法 就不会在屏幕中居中对齐

但是 当他转换为块级元素的时候就又可以居中了 ,或者父元素是块元素且设置为居中的时候文字(行内元素)也可以居中

例如:

<!-- 下面这种是不可以居中的,因为i标签默认是行内元素,而且div 也没有设置居中 -->
<div>
    <i style="text-align: center;">测试标题1</i>
</div>
<!-- 下面两种是都可以居中的 -->
<i style="text-align: center; display: block">测试标题1</i>
<div style="text-align: center;">
     <i>测试标题1</i>
 </div>

效果图:

2.该属性会被子元素继承

例如:

   <div style="text-align: center;">
        <h4>测试标题1</h4>
    </div>

这个例子跟上图中的单h4例子效果是一样的

上图可以看到 文字的内容已经居中,但是元素并没有居中.

3.MDN中有个备注 居中元素,不居中文字 的方法 特此注明一下 防止自己忘了

备注

居中一个块元素且不居中它的行内内容的标准兼容的方法是将它的左、右margin设为auto, 例如：

margin:auto; 或margin:0 auto; 或margin-left:auto; margin-right:auto;

2 元素的水平居中

1.对于确定宽度的块级元素：

magin:margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。

Magin:auto 让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。

MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin

 margin和width实现水平居中:magin: 0 auto 就可以实现水平居中

注意:

这种只适合于父元素是body的时候,其他的情况下不行.

MDN中已经不推荐这种magin: 0 auto 来实现水平的方法,

2.子绝父相的设置方法

意思 是将 子元素设置为为绝对定位,让其他的父元素设置为相对定位,再将子元素的margin left 和 right 设置为 auto, left 和right 设置为 0 '

这样的话子元素就会相对于父元素进行居中对齐

代码:

  <div style="position: relative; height:100px ; background-color:rgb(143, 143, 207)">
        <div
            style="position: absolute; width: 50px; height: 50px; left:0 ;right: 0; ;margin: 0 auto; background-color: pink; ">
        </div>
    </div>

原理:

left 和right : 定义了定位元素的左/右外边距边界与其包含块左/右边界之间的偏移，非定位元素设置此属性无效。

当设置left 和 right 为 0 或者是相同数值 边距 例如 (left:1px;right: 1px) 说明左右边距的权重是一样的

margin:

注意:

1.这种布局下需要注意高度塌陷问题

2.这种写法兼容性比较好,但是比较麻烦,

3.这种写法  将 top: 0; bottom 0;  magin :auto ; 的情况下 也可以设置垂直居中

3.flex布局中的居中

关于flex 可以看下阮一峰大大的这篇博客,写的非常详细,我这里就不多废话了

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

MDN的导引地址:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

设置改

• justify-content - 控制主轴（横轴）上所有 flex 项目的对齐(一般为水平居中,主轴为横向)。
• align-items - 控制交叉轴（纵轴）上所有 flex 项目的对齐(一般是垂直居中)。

代码

   <div style="display:flex; justify-content: center">
        <div style="width: 50px;height: 50px;background-color: pink;"></div>
    </div>

4.gird布局中居中方式

grid布局的介绍 也可以同理看下这篇博客

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

主要是用grid布局中的justify-items 属性

MDN中的解释

CSS 的 justify-items 属性为所有盒中的项目定义了默认的 justify-self ， 可以使这些项目以默认方式沿适当轴线对齐到每个盒子。

地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/justify-items

同理用align-items  属性可以实现垂直居中

<style>  
.tb {
      display: grid;
      justify-items: center;
     }

.tb div {
            background-color: pink;
            width: 50px;
            height: 50px;
        }
</style>  

<div class="tb">
    <div></div>
</div>