码迷,mamicode.com
首页 > Web开发 > 详细

CSS 样式:常用居中方法

时间:2019-09-29 20:01:04      阅读:121      评论:0      收藏:0      [点我收藏+]

标签:定位   水平   实现   方法   height   ems   items   单行   相对   

下面是一些常用的能实现居中的方法

水平居中:

1.左右margin为auto。(常规流块盒、弹性盒子不用定宽);

2.弹性盒子设置justify-content:center;让弹性项目在主轴上居中;

3.父元素设置text-align:center;让其内部的文本居中;

4.相对定位元素,margin-left:50%;transform:translateX(50%);

垂直居中:

1.单行文本垂直居中,设置父元素line-height为包含块高度;

2.弹性盒设置align-items:center,让弹性盒子在侧轴上居中;

3.相对定位元素,top:50%;transform:translateY(50%);

CSS 样式:常用居中方法

标签:定位   水平   实现   方法   height   ems   items   单行   相对   

原文地址:https://www.cnblogs.com/an2333/p/11609432.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!