css元素居中的方式有哪些

最新推荐文章于 2022-04-01 18:13:41 发布

原创最新推荐文章于 2022-04-01 18:13:41 发布 · 206 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

一.文本在父元素里居中：
a.左右居中：text-align：center；
b.上下居中：line-height：“父元素的高度”；
二.子元素在父元素里居中：
a.左右居中：
1.margin: 0 auto;
2.当子元素是inline-block时，给父元素添加 text-align：center；

b.上下居中步骤如下：
	   1 : 添加标尺 在子元素的后面添加同级元素span 并且 不能有回车
	   2 : 必须保证 标尺 inline-block  ->  标尺和子元素在同一行。
	   3 : 给标尺确定中线  添加属性  vertical-align:middle;
	   4 : 给标尺设置width:0;height:100%;

三.使用定位让元素居中
a.给父元素添加相对定位形成参照物：position:relative;
b.给子元素添加相对定位配合left、right、top、bottom等实现效果
position:relativ;
left:50%;
top:50%;
margin-left:“负的子元素的宽度的一半”;
margin-top:“负的子元素高度的一半”;