五种常见的居中形式

五种常见的居中形式

5种常见的居中形式

今天呢，我们主要细讲一下css常见居中形式，我们知道有块状元素水平居中垂直居中以及利用定位居中，或者文字的水平或者垂直居中。且慢，细听！！！ 一、块元素水平居中

这个用法就是：margin：0 auto；

我们在开发过程中，我们刚开始遵循标准流，块元素就是独占一行，且在浏览器最左边对齐，这样开发出来的网页是很难看的，一般网页遵循居中显示，大小一般是960px 、980px 等，是小于浏览器屏幕显示的。

我们写一个例子，说明一下上面的意思：

margin：0 auto；意思就是上下没有边距，左右水平居中。 二、文字居中\

用法：text-align：center；

这个属性是设置在块元素上的，用来控制块元素内部文本或者图片水平居中。

我们写一个例子：

text-align：center；意思是文本的排列形式是居中。 三、固定高度垂直居中\

这个我们可以用定位或者是外边距，一个块元素嵌套一个块元素，设置了父元素的高度，那么我们用外边距让他向下走，实现垂直居中，也可以用绝对定位让他距顶部50%，top:50%;

四、文字垂直居中

用法：这里主要是使用行内元素高度=行高，可以使文字垂直居中。

五、块状元素水平垂直居中\

用法：通过外边距将块移动到正中间

今天更新的比较简单，大家理解就行，明天我们写一下弹性布局。希望大家可以关注我，我现在是从web入门开始讲起，期待和大家一起从小白变成小牛。如果文章中有哪些错误或者不足的地方，还希望大佬指出，我会及时更新。 最后认识一下吧，我叫吕恣瑞，分享web开发知识以及学习经验，关注我，你可以有质的飞跃。\

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。