css 居中全指南

想要怎么样的居中?

1 水平居中

 inline水平的元素水平居中
     css{
     	text-align:center;
     	}
 block的元素水平居中
     css{
     	margin:0 auto;
     	}

2 垂直居中

 inline水平/如文本的元素水平居中
 	1 单行文本垂直居中
 		父元素盒子高度=行高
 	2 多行文本垂直居中
 		表格中的单元格文本默认垂直居中
 		使用flexbox`flex-direction: column;
 		使用vertical-align;
		justify-content: center;`
 block的元素水平居中
 	1 已知元素高度
 	  使用绝对定位的方式+负的margin值
 	2 未知元素高度
 	  使用绝对定位的方式+transform: translateY(-50%);
 	3 使用flexbox	

3 水平垂直居中

	1:已知宽高
	  使用绝对定位的方式+负的margin值
	2:未知宽高
	  使用绝对定位的方式+transform:translate(-50%,-50%);
	3:使用flexbox
	  .parent {
            display: flex;
            justify-content: center;
            align-items: center;
        }

posted on 2016-08-18 16:22  玩泥巴  阅读(130)  评论(0)    收藏  举报

导航