css居中总结

定义:居中是指盒子的其包含块中居中

行盒(行块盒)水平居中

  1. 直接设置行盒(行块盒)父元素 text-align:center;

常规流块盒水平居中

  1. 定宽, 设置左右margin为auto;

浮动块盒水平居中

  1. 一般会通过设置magin手动居中

绝对定位元素的水平居中

  1. 定宽,设置左右的坐标为0 (left:0,right:0),将左右的margin设置为auto , (因为不是常规流,所以不同只通过定宽,
    左右margin设置为margin实现居中)
注: 实际上,固定定位(fixed)是绝对定位(absolute)的特殊情况 ,所以固定定位跟绝对定义一样
------区别: 固定定位相对于视口 ,绝对定位相对于最近一级的 定位不是 static 的父元素来进行定位

单行文本的垂直居中

  1. 设置文本所在元素的行高,为整个区域的高度(height = line-height)

    例: height = 50px;  line-height = 50px;
    

行块盒或块盒内多行文本的垂直居中

  1. 没有完美方案,设置盒子上下内边距相同,达到类似的宽度

  2. 也可以用一个元素包裹住内容,用绝对定位

绝对定位的垂直居中

  1. 定高,设置上下的坐标为0 (top:0,bottom:0),将上下的margin设置为auto
发布了47 篇原创文章 · 获赞 12 · 访问量 9533
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览