针对div居中问题

针对div居中

在网上查找一些div居中问题的时候,发现好多整理的并不全面,有的想要的效果并没有,于是准备自己整理一下。

demo演示:http://blog.retechs.cn/demo/div-center/

 

已知div的宽高来居中

利用margin属性来居中

css代码展示
width:20rem;
height: 3rem;
margin: 1rem auto;

利用定位是div居中

css代码展示
position: absolute;
left: 50%;
margin-left: -10rem(数值为宽度的一半,这里div的宽度为20;);

利用CSS的flex属性;

css代码展示
父级{display: flex; }
子级{margin: auto;}

未知div的宽高使div居中

利用css的transform属性
css代码展示
position:absolute;
left: 50%;
transform: translate(-50%, 0%);(第一个数值为宽度的,第二的为高度的;)

更多的欢迎补充0..0。

 

点赞

发表评论