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)"><divstyle="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>

css 之水平居中对齐相关推荐

css实现input文本框与图片行内水平居中对齐
css实现input文本框与图片行内水平居中对齐如图输入框与图片不对齐 css样式添加 input,img {vertical-align:middle;}
css实现图片和文字水平居中对齐
一.通过vertical-align:middle实现现图片与文字水平对齐,需要区分html是行内元素,还是块状元素:例如:标签img.span是行内元素:标签p是块状元素则需要将标签p通过diapl ...
html/css笔记 table表格文本垂直水平居中对齐方法
简介: 平时工作中开发经常会遇到html网页样式设计,这里记录一下笔记方便后期查看,也顺便给其他人提供一个参考 HTML 文本垂直水平居中对齐方法(一):css样式水平居中 text-align 应 ...
html图片怎么中心对齐,css图片居中(css怎么让图片水平居中对齐)
css图片居中 css图片居平分css图片水平居中和笔直居中两种状况,有时候还需要图片同时水平笔直居中,下面分几种居中状况别离介绍. css图片水平居中运用margin:0auto完成图片水平居中 ...
CSS解决文字与图片不能水平居中对齐的问题
在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 其实解决办法很简单,只需为图片设置vertical-ali ...
html5 居中字体字号,css字体水平居中
access中如何把窗体所用布局设置成纵栏表你可能混淆了概念,纵栏式.表格式.数据表是窗体的类型, 而单个窗体\连续窗体\数据表\数据透视表\数据透视图是窗体视图. 其实单个窗体就是纵栏式窗体了, ...
CSS实现水平居中与垂直居中
CSS实现水平居中与垂直居中一.水平居中 1. 必备知识 1.1 text-align 属性 1.2 display 属性 1.3 margin 属性 1.4 position 属性 1.5 tra ...
自动居中对齐 html,css如何居中对齐？
在我们开发前端页面的时候,为了让页面效果美观,会出现需要居中效果的地方.下面本篇文章就来给大家介绍一下使用CSS设置居中对齐的方法,希望对大家有所帮助. 1.text-align:center -- ...
css text top,text-align属性(css中文本对齐属性)
text-align属性设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
css实现两端对齐的3种方法
说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

css 之水平居中对齐